Mat-checkbox 已选中但不更改复选框状态

我正在实现一个语言切换组件，它显示复选框，一个用于应用程序的每种语言（翻译为@ngx-translate).

单击其中一个复选框时，应用程序语言已正确切换，但单击的 mat-checkbox 仍未选中。

模板 ：

<mat-checkbox [checked]="selectedLanguage == 'en'" (click)="switchLanguage('en')">English</mat-checkbox>
<mat-checkbox [checked]="selectedLanguage == 'fr'" (click)="switchLanguage('fr')">French</mat-checkbox>
<mat-checkbox [checked]="selectedLanguage == 'de'" (click)="switchLanguage('de')">German</mat-checkbox>

成分 ：

export class CheckboxOverviewExample {
  public selectedLanguage: string;

  constructor(){
    this.selectedLanguage = 'fr';
  }

  public switchLanguage(lang: string) {
    this.selectedLanguage = lang;
    // this.translateService.use(lang); // changing ngx-translate language
    console.log('Switched to ' + lang);
  }
}

The [checked]当您路由到组件时，绑定正在工作。这mat-checkbox登陆组件时确实会检查法语（默认值）。现在，当我单击德语或英语时，语言会切换，法语复选框会正确取消选中，但是单击的复选框不会选中。

我遗漏了一些东西，可能是一个小细节，但我不明白为什么德语/英语不检查，而法语则正确取消检查。

看一下这个简单的 stackblitz 代码 https://angular-hjeezr-wcxytp.stackblitz.io重现我的案例。

所以我有一个答案给你。不需要使用单选按钮，因为您的设计师讨厌它，只需使用

<mat-checkbox [checked]="selectedLanguage === 'en'" (change)="switchLanguage('en')">English</mat-checkbox>
<mat-checkbox [checked]="selectedLanguage === 'fr'" (change)="switchLanguage('fr')">French</mat-checkbox>
<mat-checkbox [checked]="selectedLanguage ==='de'" (change)="switchLanguage('de')">German</mat-checkbox>

也使用检查类型和值selectedLanguage === 'en'

另外，使用(change)="switchLanguage('de')而不是点击

working here https://stackblitz.com/edit/angular-ajo6cr-ocwm8k?file=app/radio-overview-example.html或检查this https://angular-ajo6cr-ocwm8k.stackblitz.io