垫复选框已选中，未更改复选框状态

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]路由到组件时，绑定正在工作。在mat-checkbox法语中确实检查时降落到组件（默认值）。现在，当我单击德语或英语时，语言会切换，法语复选框会正确取消选中，但是单击的复选框不会选中。

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

看看这个简单的stackblitz代码以重现我的情况。

Answer 1

你应该使用(change)而不是(click). 您的模板应更改为：

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

...您的函数将如下所示：

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

记得导入 MatCheckboxChange

import { MatCheckboxChange} from '@angular/material';`

链接到演示。

您应该为此行为使用单选按钮。当您只需要允许一个选项选择时，复选框不是正确的方法。

<mat-radio-group [value]="selectedLanguage">
  <mat-radio-button value="en" (click)="switchLanguage('en')">English</mat-radio-button>
  <mat-radio-button value="fr" (click)="switchLanguage('fr')">French</mat-radio-button>
  <mat-radio-button value="de" (click)="switchLanguage('de')">German</mat-radio-button>
</mat-radio-group>

这是一个StackBlitz 演示。

Answer 2

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

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

工作在这里 或检查此