角度材料选择在应用程序启动时不显示当前的 ngx-translate 语言（在用户手动选择语言之前）答案

【问题标题】：Angular material select don't show current ngx-translate language on the App start (before user pick a lang manually)角度材料选择在应用程序启动时不显示当前的 ngx-translate 语言（在用户手动选择语言之前）
【发布时间】：2019-10-09 00:57:52
【问题描述】：

我正在使用ngx-translate，它工作正常。以下代码（取自官方示例）显示了当前的语言并允许我切换它：

<select #langSelect (change)="translate.use(langSelect.value)">
    <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
</select>

所有ngx-translate 基础设施均取自文档，并将永恒的。那我想用材质选择（mat-select）代替原生的select：

<mat-select #langSelect (change)="translate.use(langSelect.value)">
  <mat-option 
    *ngFor="let lang of translate.getLangs()" 
    [value]="lang" 
    [selected]="lang === translate.currentLang"
  >
    {{ lang }}
  </mat-option>
</mat-select>

你看，没什么不同。此代码还允许我切换语言，但在第一次更改之前它不会显示当前语言。

我创建了一个简单的演示，它的视图并不完美，但问题可以很容易地重现：stackblitz。我想知道我是否遗漏了一些东西，但我真的坚持在这里尝试使材料变体工作并在我打开下拉列表并选择一个语言之前向我显示当前的语言。

【问题讨论】：

标签： javascript angular internationalization angular-material ngx-translate

【解决方案1】：

你可以试试这个。您必须在mat-select 中设置[value]="translate.currentLang"。此外，mat-option 中的 selected 也不需要。

<mat-select [value]="translate.currentLang" class="lang" #langSelect (change)="translate.use(langSelect.value)">
    <mat-option 
    *ngFor="let lang of translate.getLangs()" 
    [value]="lang"
    >
       {{ lang }}
    </mat-option>
</mat-select>

【讨论】：