Angular Material复选框：模态框重开时保留选中状态

问题根源 #

你代码里的[checked]="checkedMeasurmentPointId"是把整个选中数组直接绑定给复选框的选中状态，这完全不对——正确的做法应该是判断当前复选框对应的选项是否存在于选中数组中。

具体修复方案 #

1. 修正HTML模板的选中判断 #

把[checked]的绑定逻辑改成数组包含判断：

<div class="row">
  <div class="col-md-4 mt-2"
            *ngFor="let measurementTableList of getMeasurementPointIds()">
     <p>
        <mat-checkbox 
          [checked]="checkedMeasurmentPointId.includes(measurementTableList)" 
          value="measurementTableList"
          (change)="checkedMeasurmentPoint(measurementTableList, $event)">
          {{getMeasurementPointName(measurementTableList).measurementPointName}}
        </mat-checkbox>
     </p>
  </div>
</div>

2. 优化TS逻辑（可选，让代码更严谨） #

原代码里event的类型不对，建议改成MatCheckboxChange，同时避免重复添加选项：

import { MatCheckboxChange } from '@angular/material/checkbox';

// ...

checkedMeasurmentPoint(selectedPoint: number, event: MatCheckboxChange) {
  const index = this.checkedMeasurmentPointId.indexOf(selectedPoint);
  if (event.checked) {
    // 只有当选项不在数组里时才添加
    if (index === -1) {
      this.checkedMeasurmentPointId.push(selectedPoint);
    }
  } else {
    if (index > -1) {
      this.checkedMeasurmentPointId.splice(index, 1);
    }
  }
  this.ref.markForCheck();
}

3. 保证选中数据不丢失 #

如果模态框是动态创建的组件，要确保checkedMeasurmentPointId数组在组件初始化时（比如ngOnInit钩子）能正确读取之前保存的选中数据，别每次打开模态框都把数组重置为空。

关于[(ngModel)]无效的说明 #

多选场景下直接用[(ngModel)]绑定单个布尔值不适用，要么用上面的[checked]结合数组判断，要么用FormArray管理（进阶方案，更符合Angular表单规范）：

// 初始化表单数组
measurementPointsForm = new FormArray([]);

ngOnInit() {
  // 给每个选项初始化表单控件
  this.getMeasurementPointIds().forEach(id => {
    const isChecked = this.checkedMeasurmentPointId.includes(id);
    this.measurementPointsForm.push(new FormControl(isChecked));
  });
}

<div class="row">
  <div class="col-md-4 mt-2"
            *ngFor="let measurementTableList of getMeasurementPointIds(); let i = index">
     <p>
        <mat-checkbox 
          [formControl]="measurementPointsForm.at(i)"
          (change)="checkedMeasurmentPoint(measurementTableList, $event)">
          {{getMeasurementPointName(measurementTableList).measurementPointName}}
        </mat-checkbox>
     </p>
  </div>
</div>

这种方式能更清晰地管理复选框状态，后续也更容易做表单验证等操作。

内容的提问来源于stack exchange，提问作者Eren Akgöz