Угловой выбор материала не показывает текущий язык 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 взята из документа и будет постоянной. Затем я хочу использовать выбор материала (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 . Интересно, я что-то пропустил, но я действительно застрял здесь, пытаясь заставить вариант материала работать, и покажет мне текущий язык перед открытием выпадающего меню и выберет язык .

Answer 1

Вы можете попробовать это. Вы должны установить [value]="translate.currentLang" в mat-select. Также вам не нужно selected в 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>