NGX-Translate不能与Angular Material的mat-select一起使用？

Question

我正在使用Angular 9.1我已经使用NGX-translate来选择网站的语言：

<label class="mr-3"> {{'HEADER.CHOOSE' | translate}}
  <select #langselect (change)="translate.use(langselect.value)">
    <option *ngFor="let lang of translate.getLangs()" [value]="lang">{{ lang }}</option>
  </select>
</label>

有效。

但是当我对Material进行相同操作时，它显示得很好，但是翻译不起作用。

<mat-form-field>
  <mat-label>{{'HEADER.CHOOSE' | translate}}</mat-label>
  <mat-select #langselect (change)="translate.use(langselect.value)">
    <mat-option *ngFor="let lang of translate.getLangs()" [value]="lang">
      {{ lang }}
    </mat-option>
  </mat-select>
</mat-form-field>

这是我的TS：

export class LangSelectorComponent {
  constructor(public translate: TranslateService) {
    translate.setDefaultLang('english');
    translate.use('english');
    translate.addLangs(['english','francais']);
  }
}

我的代码有问题吗，还是与Material和NGX兼容的问题？

谢谢。

Answer 1

<mat-select>没有(change)输出。您可以将(selectionChange)用作现有代码中的精确替换。

（（或您可能想通过添加ControlValueAccessor或[(ngModel)]并使用选择代码直接绑定到组件代码中的setter来使用formControlName界面。

这里是一个有效的StackBlitz示例：https://stackblitz.com/edit/angular-ivy-reoyvd?file=src%2Fapp%2Fapp.component.html（