Angular material select 不在应用程序启动时显示当前的 ngx-translate 语言（在用户手动选择语言之前）

Question

我正在使用 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 基础设施都取自文档并将永恒的。然后我想用 material select (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。我想知道我是否遗漏了什么，但我真的坚持在这里尝试使 material 变体工作并 在我打开下拉菜单并选择一个语言 之前向我显示当前语言。

Answer 1

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

<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>

Angular material select 不在应用程序启动时显示当前的 ngx-translate 语言（在用户手动选择语言之前）

Angular material select don't show current ngx-translate language on the App start (before user pick a lang manually)

javascript

internationalization

angular-material

ngx-translate

angular