angular - Mat-checkbox checked 不改变复选框状态

Question

我正在实现一个显示复选框的语言切换组件，应用程序的每种语言对应一个复选框(使用 @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);
  }
}

[checked] 绑定(bind)在您路由到组件时起作用。法语的 mat-checkbox 在登陆组件时确实被选中(默认值)。现在，当我单击德语或英语时，语言确实会切换，法语复选框会正确取消选中，但是单击的复选框不会选中。

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

看看this simple stackblitz code重现我的案例。

Answer 1

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

<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') 而不是点击

工作 here 或查看 this