兄弟，我太懂你遇到这个错误的崩溃感了！我之前在做Angular表格全选功能的时候也踩过这个坑，先看看你碰到的这个错误：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '[object Object],[object Object],[object Object],[object Object]'. Current value: ''。

问题根源 #

这个错误本质是Angular的变更检测机制在“较真”。Angular每次变更检测会分两步：先更新视图里的绑定值，然后再做一次校验，确保所有表达式的值在检测后没有偷偷变动。你在ngDoCheck这个钩子里面修改了选中项数组的内容，导致Angular校验时发现前后值不一致，直接抛出了这个错误。而且ngDoCheck是变更检测周期里触发非常频繁的钩子，很容易不小心踩这个坑。

靠谱的解决方案 #

1. 把全选逻辑从ngDoCheck里移出来（最推荐）

ngDoCheck本来就不是用来处理业务逻辑的，全选功能的正确打开方式应该绑定到按钮的点击/变更事件上，或者数据更新的钩子（比如ngOnChanges）里。比如：

// 组件类代码
selectedItems: any[] = [];
tableData: any[] = []; // 你的表格数据源

// 全选按钮的变更事件
onSelectAll(isChecked: boolean) {
  if (isChecked) {
    // 全选时复制所有数据到选中数组，避免引用问题
    this.selectedItems = [...this.tableData];
  } else {
    // 取消全选直接清空
    this.selectedItems = [];
  }
}

// 单个选项的变更事件
onItemToggle(item: any, isChecked: boolean) {
  if (isChecked) {
    this.selectedItems.push(item);
  } else {
    // 找到对应项并移除
    const itemIndex = this.selectedItems.findIndex(i => i.id === item.id);
    if (itemIndex !== -1) {
      this.selectedItems.splice(itemIndex, 1);
    }
  }
}

模板里这么绑定：

<!-- 全选复选框 -->
<input type="checkbox" (change)="onSelectAll($event.target.checked)">

<!-- 表格行的复选框 -->
<tr *ngFor="let item of tableData">
  <td><input type="checkbox" [(ngModel)]="item.isChecked" (change)="onItemToggle(item, $event.target.checked)"></td>
  <!-- 其他列 -->
</tr>

这样逻辑完全在事件回调里，变更检测能正常追踪到selectedItems的变化，不会触发错误。

2. 手动触发变更检测（应急用）

如果实在没办法要在ngDoCheck里处理逻辑，可以注入ChangeDetectorRef来手动同步变更：

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourTableComponent {
  selectedItems: any[] = [];

  constructor(private cdr: ChangeDetectorRef) {}

  ngDoCheck() {
    // 你的业务逻辑，比如更新selectedItems
    // ...

    // 手动触发一次变更检测，让Angular同步最新值
    this.cdr.detectChanges();
  }
}

不过这个方法是治标不治本的，尽量先优化逻辑，实在没辙再用。

3. 用setTimeout延迟执行（也是应急方案）

把修改selectedItems的代码放到setTimeout里，让它在当前变更检测周期结束后再执行，避开校验：

ngDoCheck() {
  setTimeout(() => {
    // 这里处理selectedItems的更新逻辑
  }, 0);
}

这个方法利用了JS的事件循环，把操作放到下一个宏任务里，不会和当前的变更检测冲突，但同样不推荐作为首选方案。

内容的提问来源于stack exchange，提问作者zhang chi jian