ngx-translate при вводе углового материала не показывает перевод при начальной нагрузке, но показывает его после этого

Question

Я использую ngx-translate v10.02 в своем приложении Angular 6 и использую материал 6.4

У меня очень раздражающая проблема, когда значение отображается без перевода при начальной загрузке, но затем, если я изменю язык назад и вперед, оно будет выглядеть переведенным

Мой код такой:

<mat-form-field>
  <input matInput placeholder="{{'IDType'| translate}}" disabled name="idType" 
  [(ngModel)]="this.dataService.idType" 
  value="{{this.dataService.idType | translate}}">
    </mat-form-field>

Таким образом, при начальной загрузке он покажет саму переменную без перевода (т.е. значение this.dataService.idType) но тогда это переводит, если я меняю язык, мне интересно, что вызывает это.

Кто-нибудь может посоветовать, что я здесь пропустил?

Обновить:

Все остальные переведенные элементы отображаются правильно при начальной загрузке, кроме той, что показана выше, я вижу разницу в том, что это единственный элемент, который должен иметь переменную для перевода, все остальные являются статическими полями

Это поле является переменной, которая изменяется между двумя значениями, поэтому я не могу заменить ее статическим значением, но, поскольку оно переведено после изменения языка, я чувствую, что это выполнимо, но для его работы не хватает мелочей.

Answer 1

Я наконец выяснил проблему, надеюсь, это поможет кому-то еще

Значение, которое было загружено изначально в поле ввода, было

[(ngModel)]="this.dataService.idType" 

Затем он был перезаписан переведенным значением при смене языка, поэтому в моем случае решение заключалось в том, чтобы удалить ngModel и зависеть только от поля значения, в котором есть перевод, и корректно загружает его при начальной загрузке, поэтому код будет таким:

<mat-form-field>
  <input matInput placeholder="{{'IDType'| translate}}" disabled name="idType" 
  value="{{this.dataService.idType | translate}}">
</mat-form-field>

Answer 2

Вы уверены, что при загрузке установлен начальный язык? В app.component или в любом другом виде this.translateService.use('en') или любой другой язык по умолчанию.

такой как:

export class AppComponent {
param = {value: 'world'};

constructor(translate: TranslateService) {
    // this language will be used as a fallback when a translation isn't found in the current language
    translate.setDefaultLang('en');

     // the lang to use, if the lang isn't available, it will use the current loader to get them
    translate.use('en');
}