Angular Material Sort(matSort)引发ExpressionChangedAfterItHasBeenCheckedError问题

错误原因 #

ExpressionChangedAfterItHasBeenCheckedError 是Angular开发模式下的变更检测校验错误：Angular完成一轮变更检测后，发现组件属性值在检测完成后又发生了变化，触发了二次变更，因此抛出该错误。

你的代码中，构造函数里订阅 Observable 并修改 dataSource.data，随后在 ngAfterViewInit 中设置 paginator 和 sort，这两个操作都属于同一变更检测周期内的异步/延迟操作，导致Angular检测到视图初始化后数据/状态仍在变化，从而触发错误。

解决办法 #

以下几种方案都可以解决这个问题，按需选择：

方案1：手动触发变更检测 #

注入 ChangeDetectorRef，在修改 dataSource.data 后手动同步视图，让Angular知晓这次变更：

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

export class xComponent implements AfterViewInit, AfterContentInit {
  // ... 其他属性保持不变

  constructor(private cdr: ChangeDetectorRef) {
    this.dataSource = new MatTableDataSource<tab>(this.data);
    this.dataFromService$ = of(tab_data);
    this.dataFromService$.subscribe(data => {
      this.dataSource.data = data;
      this.isLoadingResults = false; // 记得更新加载状态
      this.cdr.detectChanges(); // 手动触发变更检测，同步视图状态
    })
  }

  // ... 其他方法保持不变
}

方案2：将数据更新移至下一个宏任务 #

用 setTimeout 包裹数据更新操作，让它脱离当前变更检测周期：

export class xComponent implements AfterViewInit, AfterContentInit, OnInit {
  // ... 其他属性保持不变

  constructor() {
    this.dataSource = new MatTableDataSource<tab>(this.data);
    this.dataFromService$ = of(tab_data);
  }

  ngOnInit(): void {
    this.dataFromService$.subscribe(data => {
      setTimeout(() => {
        this.dataSource.data = data;
        this.isLoadingResults = false;
      });
    });
  }

  // ... 其他方法保持不变
}

方案3：使用异步管道（更推荐） #

直接在模板中用 async 管道处理 Observable，避免手动订阅，让Angular自动管理变更检测：

1. 组件中无需手动订阅，直接保留 dataFromService$：

export class xComponent implements AfterViewInit, AfterContentInit {
  // ... 其他属性保持不变

  dataFromService$: Observable<tab[]> = of(tab_data);

  constructor() {
    this.dataSource = new MatTableDataSource<tab>([]);
  }

  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  // ... 其他方法保持不变
}

2. 在模板中绑定数据：

<mat-table [dataSource]="dataFromService$ | async" matSort>
  <!-- 表格列定义 -->
</mat-table>

额外提示 #

• 不要在构造函数中做数据订阅或视图相关操作，优先使用 ngOnInit 生命周期钩子，它是专门用于组件初始化逻辑的。
• 你的 isLoadingResults 始终为 true，记得在数据加载完成后设置为 false，避免加载状态一直显示。

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