選中的墊復選框不會改變復選框狀態

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

所以我有一個答案給你。 不需要使用單選按鈕，因為您的設計師討厭它只是使用

<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')而不是單擊

在這里工作或檢查這個

Answer 2

您應該使用(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 3

作為其他答案的替代方案，您可以選擇不使用單獨的函數來處理change事件，而是分配如下值： (change)="myBooleanVar = $event.source.checked"此示例在 OP 的情況下不起作用，但可能對使用復選框分配是/否值的其他人有用。

Answer 4

(click) 是一個 DOM 事件，而 (change) 是從 Angular 框架生成的。

Click 將有一個通用的 DOM 事件對象，並更改 MatCheckboxChange 對象。

點擊首先觸發。