代码之家 › 专栏 › 技术社区 › Wis

选中Mat复选框不更改复选框状态

angular-material2 angular-material angular

Wis · 技术社区 · 7 年前

我正在实现一个语言切换组件,该组件显示复选框,应用程序的每种语言对应一个复选框(翻译为 @ngx-translate )。

单击其中一个复选框时,应用程序语言已正确切换,但单击的mat复选框仍处于未选中状态。

模板:

<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 对于法语,在着陆到组件时确实会选中(默认值)。现在,当我单击德语或英语时,语言会切换,法语复选框会正确取消选中,但单击的复选框不会选中。

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

看看 this simple stackblitz code 复制我的案例。

4 回复 | 直到 3 年前

Hrishikesh Kale 7 年前

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

<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

FAISAL 7 年前

您应该使用 (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';`

链接到 Demo 。

您应该使用 radio buttons 对于此行为。当您只需允许单个选项选择时,复选框不是正确的方式。

<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 Demo 。

Paul Strupeikis 5 年前

除其他答案外,您可以选择不使用单独的函数来处理 change 事件,但指定如下值: (change)="myBooleanVar = $event.source.checked" 此示例在OP的情况下不起作用,但对于使用复选框指定是/否值的其他人可能有用。

Richard K 4 年前

(单击)是DOM事件,而(更改)是从角度框架生成的。

单击将有一个通用DOM事件对象,并更改MatCheckboxChange对象。

单击“首先激发”。