Angular 14中如何取消Mat Checkbox的选中状态？

问题根源 #

点击取消按钮移除选中项后，下拉复选框仍显示选中，核心原因是：

• 使用splice修改selectData数组时，数组的引用未发生变化，Angular表单控件无法检测到值的更新，导致视图未同步刷新。
• 虽然代码中修改了data.selected状态，但因数组引用未变，变更检测未触发，视图未更新该状态。

修复步骤 #

1. 修改数组操作逻辑，使用不可变数据模式 #

将splice替换为filter创建新数组，添加元素时也用扩展运算符生成新数组，确保数组引用变更：

toggleSelection = (data: ItemData): void => {
  data.selected = !data.selected; 
  if (data.selected === true) { 
    if (!this.selectData.find(({ item }) => item === data.item)) {
      // 扩展运算符创建新数组，添加元素
      this.selectData = [...this.selectData, data]; 
    }  
  } else {
    // filter返回新数组，移除目标元素
    this.selectData = this.selectData.filter(value => value.item !== data.item);
  } 
  this.selectControl.setValue(this.selectData);
  this.emitAdjustedData();
};

2. 确保模板复选框绑定正确 #

检查模板中复选框的checked绑定逻辑，确保与数据状态一致：

• 若绑定到data.selected：

<input type="checkbox" [checked]="data.selected" (change)="toggleSelection(data)">

• 若绑定到选中数组的存在性：

<input type="checkbox" [checked]="selectData.some(item => item.item === data.item)" (change)="toggleSelection(data)">

原理说明 #

通过不可变数据操作（创建新数组），改变selectData的引用，Angular会检测到表单控件值的变化，触发变更检测，从而同步更新下拉复选框的选中状态。这种方式也让状态变化更清晰，避免因引用复用导致的状态不一致问题。

内容的提问来源于stack exchange，提问作者EMahan K