更改 lang 时，mat-option 中的翻译值会导致 ExpressionChangedAfterItHasBeenCheckedError答案

【问题标题】：Translated value inside mat-option causes ExpressionChangedAfterItHasBeenCheckedError when lang is changed更改 lang 时，mat-option 中的翻译值会导致 ExpressionChangedAfterItHasBeenCheckedError
【发布时间】：2021-08-04 13:14:00
【问题描述】：

在 mat-select 中选择一个值，然后点击切换按钮。

您应该会从控制台看到“ExpressionChangedAfterItHasBeenCheckedError”

https://stackblitz.com/edit/angular-ivy-ifbsaj

发生这种情况是因为我已将项目从 Angular 11 迁移到 Angular 12

【问题讨论】：

这是库的错误，报告那里的问题

标签： angular angular-material ngx-translate

【解决方案1】：

将ChangeDetectorRef 注入您的组件，并在更改switchLang 中的语言后调用detectChanges 函数，将强制Angular 检测在检查后发生更改的值。

constructor(
  private _translateService: TranslateService,
  private cdr: ChangeDetectorRef
) {}

switchLang() {
  this._translateService.use(
    this._translateService.currentLang == 'fr' ? 'en' : 'fr'
  );
  this.cdr.detectChanges();
}

【讨论】：

【解决方案2】：

我也有同样的问题。我找到了 2 个解决方法。最简单的方法是将mat-select标签变成原生的select标签。

另一方面，如果您希望继续使用 mat-select 元素，那么您可以执行以下操作：

// inside some component
constructor(private translate: TranslateService) {}

ngOnInit(): void {
    this.translate.get(["my.dropdown.keys"]).subscribe(v => {
        this.values = [
            { label: v["value1"], value: "value1" },
            { label: v["value2"], value: "value2" },
            { label: v["value3"], value: "value3" },
        ];
    });
}

然后，在您的 .html 文件中，您可以使用 *ngFor 指令来填充您的选项。

【讨论】：