angular material 输入中的 ngx-translate 在初始加载时未显示翻译但之后显示

Question

我在 Angular 6 应用程序中使用 ngx-translate v10.02 并使用 material 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

您确定加载时设置了初始语言吗？在 app.component 或任何 bootstrap。 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');
}

Answer 2

我终于找到了问题所在，希望这对其他人有帮助

最初在输入字段中加载的值属于

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

然后当我更改语言时它被翻译后的值覆盖，所以我的解决方案是删除 ngModel 并仅依赖于具有翻译的值字段并在初始加载时正确加载它，所以代码将是这样的：

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

angular material 输入中的 ngx-translate 在初始加载时未显示翻译但之后显示

ngx-translate in angular material input not showing the translation on initial load but shows it after that

ngx-translate

angular

angular6