Angular Material V15.2.8中mat-checkbox点击无勾选状态变更问题

你当前使用单向属性绑定 [checked]，这种绑定仅会将TS中的checked值同步到视图，但不会在用户点击复选框时反向更新TS变量，因此点击后复选框的状态和值都不会发生变化。以下是两种可行的解决方法：

方法一：使用双向数据绑定 [(ngModel)] #

通过双向绑定可以实现视图与TS变量的双向同步，需要确保你的模块中已导入FormsModule：

1. 模板代码修改：

<mat-checkbox [(ngModel)]="checked">Text</mat-checkbox>

2. 在对应的模块中导入FormsModule：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他必要导入（如MatCheckboxModule）
    FormsModule
  ]
})
export class YourFeatureModule { }

TS中的checked变量无需修改：

checked = false;

方法二：手动绑定change事件更新变量 #

通过监听复选框的change事件，手动将新的选中状态赋值给TS变量：

模板代码修改：

<mat-checkbox [checked]="checked" (change)="checked = $event.checked">Text</mat-checkbox>

TS变量保持不变：

checked = false;

内容的提问来源于stack exchange，提问作者Saeed Ahmadian