垫复选框已选中，未更改复选框状态 [英] Mat-checkbox checked not changing checkbox state

问题描述

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

I'm implementing a language switch component which display checkboxes, one for each language of the app (translations with @ngx-translate).

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

When clicking one of the checkbox, app language is correctly switched but the clicked mat-checkbox is still unchecked.

模板:

<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(默认值).现在，当我单击德语或英语时，语言会切换，法语复选框会正确取消选中，但是单击的复选框不会选中.

The [checked] binding is working when you route to the component. The mat-checkbox for french is indeed checked when landing to the component (default value). Now when I click on german or english, the language does switch, the french checkbox does correctly uncheck, however the clicked checkbox does not check.

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

I'm missing something, might be a small detail, but I do not understand why the german / english does not check while the french does correctly uncheck.

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

Have a look at this simple stackblitz code to reproduce my case.

推荐答案

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

so I have an answer for you. don't need to use a radio button as your designer hate it just use

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

also, use (change)="switchLanguage('de') instead of click

正在此处 或检查此

这篇关于垫复选框已选中，未更改复选框状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！