Angular mat-table isAllSelected()函数无限执行问题咨询

问题原因 #

这不是Angular Material的默认行为，问题根源在于两处：

• 模板中[checked]直接绑定了isAllSelected()方法，Angular的变更检测机制会在每次检测循环时调用这个方法
• isAllSelected()内部修改了组件属性this.rowsToSend，属性变更会触发新一轮变更检测，形成无限循环

是否会导致内存泄漏 #

会存在性能风险：频繁的函数执行和变更检测循环会持续占用CPU，长期运行可能导致内存占用逐渐升高——每次变更检测都会产生临时对象，循环无法终止的话，最终会引发性能卡顿甚至内存泄漏。

解决方案 #

1. 用属性缓存代替模板直接调用方法 #

在组件类中维护一个布尔属性存储全选状态，避免模板每次检测都执行方法：

// 组件类新增属性
isAllSelectedFlag = false;

// 封装更新全选状态的方法
updateAllSelectedStatus() {
  const numSelected = this.selection.selected.length;
  const numRows = this.dataSource.data.length; // 替换为你的数据源长度获取逻辑
  this.isAllSelectedFlag = numSelected === numRows;
}

模板中修改绑定：

<mat-checkbox (change)="$event ? toggleAllRows() : null"
              [checked]="selection.hasValue() && isAllSelectedFlag" 
              [indeterminate]="false"
              [aria-label]="checkboxLabel()">
</mat-checkbox>

2. 分离属性修改逻辑，避免触发额外变更检测 #

把this.rowsToSend = this.selection.selected从isAllSelected()中移出，通过监听选中状态变化来更新：

ngOnInit() {
  // 监听选中项变化，同步更新rowsToSend和全选状态
  this.selection.changes.subscribe(() => {
    this.rowsToSend = this.selection.selected;
    this.updateAllSelectedStatus();
  });

  // 数据源加载完成后初始化全选状态
  // 替换为你的数据源加载完成触发逻辑，比如dataSource的data变化监听
  this.dataSource.data.subscribe(() => {
    this.updateAllSelectedStatus();
  });
}

3. 修复重复事件绑定问题 #

你的单元格复选框绑定了两次(change)事件，会导致逻辑重复触发，需要合并：

<mat-checkbox (click)="$event.stopPropagation()"
              (change)="handleRowSelection($event, row)"
              [checked]="selection.isSelected(row)" 
              [aria-label]="checkboxLabel(row)">
</mat-checkbox>

组件类中添加统一处理方法：

handleRowSelection(event: MatCheckboxChange, row: any) {
  event.checked ? this.selection.select(row) : this.selection.deselect(row);
  this.selectRow(event, row); // 调用原有selectRow逻辑
}

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