Angular组件设置changeDetection为onPush后视图不更新如何解决

OnPush变更检测策略触发视图更新的前提只有4种：

• 组件@Input()输入值的引用发生整体变更
• 组件模板绑定的DOM事件（点击、输入等）执行完成
• 模板中使用的async管道收到新的流值
• 手动调用变更检测标记方法

你遇到的编辑后不更新问题，本质是直接修改了数据源对象/数组的内部属性，没有触发上述任何一个检测条件，对应解决方法按推荐优先级排序如下：

1. 遵循不可变数据原则，替换数据源引用（最优方案，性能最好） #

mat-table的MatTableDataSource只会在data输入的引用发生变化时触发重渲染，直接修改原数组、原对象的属性不会被检测到。

错误示例（直接修改原数据，无引用变更）：

dataSource = new MatTableDataSource(tableData); // 对接Mongo返回的数据集

// 编辑逻辑
editRow(rowId: string, updateData: Partial<TableRow>) {
  const targetRow = this.dataSource.data.find(row => row._id === rowId);
  Object.assign(targetRow, updateData); // 直接修改原对象属性，引用不变
}

正确写法是在编辑后生成新的数组、新的行对象引用，再赋值给数据源：

editRow(rowId: string, updateData: Partial<TableRow>) {
  // map返回全新的数组引用
  this.dataSource.data = this.dataSource.data.map(row => {
    if (row._id === rowId) {
      // 匹配到目标行时，返回合并后的新对象，不修改原对象
      return {...row, ...updateData}
    }
    return row;
  })
}

删除、新增行同理，不要用splice/push直接修改原数组，用filter、扩展运算符生成新数组再赋值即可。

2. 手动标记组件为待检查状态（适配老逻辑改造成本高的场景） #

如果现有代码大量存在直接修改原数据的逻辑，短时间内改不完，可以注入ChangeDetectorRef，在数据修改完成后调用markForCheck()方法标记更新：

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

constructor(private cdr: ChangeDetectorRef) {}

editRow(rowId: string, updateData: Partial<TableRow>) {
  const targetRow = this.dataSource.data.find(row => row._id === rowId);
  Object.assign(targetRow, updateData);
  // 标记当前组件及父链为待检测状态，下一次变更检测周期会自动更新视图
  this.cdr.markForCheck();
}

注意：优先用markForCheck()，不要用detectChanges()立即触发全量检测，后者性能开销更大。

3. 使用async管道绑定Observable数据源（流场景适配） #

如果你的Mongo数据是通过Observable流推送的，可以直接用async管道绑定数据源，流推送新值时Angular会自动触发OnPush模式下的变更检测，不需要手动处理：

// 组件类中
tableData$ = this.mongoService.getTableDataStream(); // 拿到数据的Observable流

// 模板中
<table mat-table [dataSource]="tableData$ | async">
  <!-- 列定义照常写 -->
</table>

编辑数据后只要让流发出新的数据集引用，视图会自动同步。

常见踩坑提醒 #

不要在修改原数组后再把同一个数组引用重新赋值给dataSource.data，这种操作不会触发引用变更，视图还是不会更新。

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