选中Mat复选框，不更改复选框状态-Java 学习之路

我正在实现一个语言切换组件，它显示复选框，一个用于应用程序的每种语言（使用 @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 for french（默认值） . 现在，当我点击德语或英语时，语言会切换，法语复选框会正确取消选中，但点击的复选框不会检查 .

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

看看this simple stackblitz code重现我的情况 .

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

工作here或检查this

回复于 2024-05-01T02:44:25+08:00

您应该使用 (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 .

回复于 2024-05-01T02:44:25+08:00

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

2 回答

相关问题