mat-checkbox的checked属性未正确响应状态问题求助

控制台能打印状态变化，但mat-checkbox并未通过getState()函数的返回值更新显示状态，是否误解了checked属性的用法？原本以为当函数返回值变化时，mat-checkbox的状态会随之更新。

补充说明：已查阅大量相关解答但均不适用，且不想使用响应式表单或双向绑定，因为这会使代码复杂化。

代码示例 #

HTML文件

<mat-checkbox [checked]="getState()" (change)="toggleState()">Example Checkbox</mat-checkbox>
<br><br>
<button mat-raised-button color="primary" (click)="toggleState(false)">click</button>

TypeScript文件

public selectedState: boolean = false;

constructor(){
}

public toggleState(state: boolean) {
  console.log(state);
  if (state !== null || typeof state === 'undefined') {
    console.log('toggleState: false');
    return false;
  }
}

public getState(): boolean {
  console.log('selectedState: ' + this.selectedState);
  return this.selectedState;
}

问题原因及解决方案 #

1. 核心问题：未修改绑定的状态变量
   你的toggleState函数完全没有修改selectedState的值，导致getState()一直返回初始的false，自然checkbox不会有状态变化。

2. 修正toggleState的逻辑
   调整函数逻辑，根据传入的参数或者checkbox的change事件来更新selectedState：

   public toggleState(state?: boolean) {
     // 如果传入了state参数，直接赋值；否则取当前状态的反值
     this.selectedState = typeof state !== 'undefined' ? state : !this.selectedState;
     console.log('selectedState updated to:', this.selectedState);
   }
   

   这里用可选参数处理两种调用场景：点击checkbox时不传参数（取反），点击按钮时传入false设置状态。

3. Angular变更检测的说明
   Angular的变更检测会在事件触发（比如点击、change事件）时自动执行，此时getState()会重新调用，返回更新后的selectedState，checkbox的状态就会同步更新。不需要额外操作，只要保证绑定的状态变量确实被修改即可。

内容的提问来源于stack exchange，提问作者Kristjan O.