Angular通用mat-table组件实例复选框全选异常求助

问题出在通用表格组件的SelectionModel实例共享上。多个app-common-table实例复用了同一个selectionList对象，导致操作第二个表格的全选时，实际修改的是第一个表格绑定的选择模型，从而触发第一个表格的复选框选中状态变化。

1. 确保每个组件实例拥有独立的SelectionModel #

在common-table组件类中，将selectionList定义为实例成员变量，禁止使用static关键字，保证每个表格实例都创建自己的选择模型：

// common-table.component.ts
import { SelectionModel } from '@angular/cdk/collections';

export class CommonTableComponent {
  // 每个组件实例都会初始化独立的SelectionModel
  selectionList = new SelectionModel<any>(true);

  // ...其他代码
}

2. 数据源更新时重置选择状态 #

当父组件传入新的tableData时，清空当前选择列表，避免旧数据的选择状态干扰新表格：
修改setTableData方法，添加选择状态重置逻辑：

setTableData() {
  this.dataSource.data = this.tableData;
  this.dataSource.paginator = this.matPaginatorItem;
  this.dataSource.sort = this.matSortItem;
  // 重置选择状态，避免旧数据影响
  this.selectionList.clear();
}

同时，为tableData添加@Input()的setter监听，确保数据源变化时自动更新表格并重置选择：

private _tableData: any[];
@Input()
set tableData(data: any[]) {
  this._tableData = data;
  this.setTableData();
}
get tableData(): any[] {
  return this._tableData;
}

3. 验证isAllSelected方法的独立性 #

确保isAllSelected方法仅依赖当前组件实例的数据源和选择模型，避免引用全局或共享变量：

isAllSelected() {
  const selectedCount = this.selectionList.selected.length;
  const totalRows = this.dataSource.filter 
    ? this.dataSource.filteredData.length 
    : this.dataSource.data.length;
  return selectedCount === totalRows;
}

4. 检查模板绑定是否正确 #

确保表格模板中的全选复选框绑定的是当前组件实例的selectionList和isAllSelected()方法：

<!-- common-table.component.html -->
<mat-header-cell *matHeaderCellDef>
  <mat-checkbox
    (change)="selectAllChekboxes()"
    [checked]="isAllSelected()"
    [indeterminate]="selectionList.selected.length > 0 && !isAllSelected()">
  </mat-checkbox>
</mat-header-cell>

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