Angular中如何通过mat-checkbox实现数组选中项的增删操作？

解决方案 #

步骤1：修改模板事件绑定，传入复选框状态事件

Angular Material 的 mat-checkbox 触发 change 事件时会返回 MatCheckboxChange 类型的事件对象，你可以直接把该对象作为参数传入处理方法：

<mat-checkbox (change)="reprocessHomeProcesses($event, execution)" class="checker"></mat-checkbox>

步骤2：重写业务处理方法

通过事件对象的 checked 属性区分选中/取消状态，选中时添加数据到数组，取消时从数组移除对应数据：

// 若需要强类型校验，可先导入对应类型
import { MatCheckboxChange } from '@angular/material/checkbox';

executions = []

reprocessHomeProcesses(event: MatCheckboxChange, exe: any) {
  if (event.checked) {
    // 选中：先判断是否已存在，避免重复添加
    const isExisted = this.executions.some(item => item.process === exe.process);
    if (!isExisted) {
      this.executions.push(exe);
    }
  } else {
    // 取消选中：过滤掉对应数据
    this.executions = this.executions.filter(item => item.process !== exe.process);
  }
  console.log(this.executions);
}

说明：如果你能保证每条 execution 数据的 process 字段是唯一标识，用上述逻辑即可；如果有其他唯一主键，把判断条件里的 process 替换成对应字段即可。

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