Angular带选择表格：输入行数据时自动勾选复选框的实现问题

你遇到的核心问题是：直接修改复选框的[checked]属性只是视觉上的勾选，并没有真正更新Angular Material的SelectionModel实例——而表格行的选中背景、主复选框的中间状态都是依赖这个模型的状态来同步的。

正确的解决方案：通过SelectionModel维护选中状态 #

我们需要在日期字段更新时，主动将行加入/移除SelectionModel，这样所有依赖模型的UI状态都会自动同步。

1. 修改日期更新的事件处理方法

在你的组件类中，更新onDateUpdate方法，同步维护选中状态：

onDateUpdate(event: any, row: any) {
  // 先更新行的日期值（根据ngx-mydatepicker的返回格式调整）
  row.date = event.formatted;

  // 根据日期是否存在，更新SelectionModel
  if (row.date) {
    // 日期已填写，确保行被选中
    if (!this.selection.isSelected(row)) {
      this.selection.select(row);
    }
  } else {
    // 日期被清空，取消行选中
    if (this.selection.isSelected(row)) {
      this.selection.deselect(row);
    }
  }
}

2. 恢复复选框的绑定逻辑

把行复选框的[checked]绑定改回依赖SelectionModel的状态，不需要额外的|| !!row.date：

<ng-container matColumnDef="select">
  <th mat-header-cell *matHeaderCellDef>
    <mat-checkbox 
      (change)="$event ? masterToggle() : null" 
      [checked]="selection.hasValue() && isAllSelected()" 
      [indeterminate]="selection.hasValue() && !isAllSelected()">
    </mat-checkbox>
  </th>
  <td mat-cell *matCellDef="let row">
    <mat-checkbox 
      (click)="$event.stopPropagation()" 
      (change)="$event ? selection.toggle(row) : null" 
      [checked]="selection.isSelected(row)">
    </mat-checkbox>
  </td>
</ng-container>

3. 验证主复选框状态

现在当你填写日期时，SelectionModel会自动添加该行，主复选框的indeterminate（中间状态）和checked（全选状态）会通过你已有的isAllSelected()方法自动计算，完全同步。

为什么之前的方法无效？ #

你之前的[checked]="selection.isSelected(row) || !!row.date"只是强制复选框显示为选中，但没有修改SelectionModel的内部状态：

• 表格行的选中背景是Angular Material表格基于SelectionModel的选中状态添加的CSS类，所以不会变化
• 主复选框的状态依赖selection.hasValue()和选中数量，由于SelectionModel没更新，自然无法同步

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