如何解决Angular的NG0100 ExpressionChangedAfterItHasBeenCheckedError错误？

错误核心原因 #

这个错误是Angular变更检测机制的触发警告：在当前变更检测周期完成后，组件模板绑定的表达式值发生了变更。你的代码中，在ngAfterViewInit生命周期钩子内订阅数据流并修改了组件属性SelectHomePageCategories——而ngAfterViewInit是在Angular完成当前视图变更检测后才执行的，此时修改属性会导致Angular检测到「视图已渲染但绑定数据又发生变化」的矛盾，从而抛出该错误。

具体解决方法 #

方法1：用NgZone.run包裹属性修改 #

借助Angular的NgZone确保属性修改操作在Angular的变更检测上下文内执行，避免周期冲突：

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

// 构造函数注入NgZone
constructor(private ngZone: NgZone, /* 其他依赖 */) {}

ngAfterViewInit(): void {
    const filterValue = "";

    this._store$.dispatch(new OnlineProductsStoreActions.GetOnlineProducts(this.filter));
    this._store$.dispatch(new OnlineProductsStoreActions.SearchProduct(filterValue, this.filter));
    this._store$.dispatch(new OnlineProductsStoreActions.HomePageCategory());

    this.onlineproductsEffects.getOnlineProductsHomePageCategory$
        .pipe(
            filter((action) => action.type === OnlineProductsStoreActions.ActionTypes.HOME_PAGE_CATEGORY_SUCCESS),
            takeUntil(this.destroyed$)
        )
        .subscribe((res) => {
            console.log(res);
            this.ngZone.run(() => {
                this.SelectHomePageCategories = res;
            });
        });
}

方法2：用setTimeout延迟属性修改 #

利用setTimeout将属性修改放到下一个宏任务队列，让Angular完成当前变更检测后再执行：

ngAfterViewInit(): void {
    const filterValue = "";

    this._store$.dispatch(new OnlineProductsStoreActions.GetOnlineProducts(this.filter));
    this._store$.dispatch(new OnlineProductsStoreActions.SearchProduct(filterValue, this.filter));
    this._store$.dispatch(new OnlineProductsStoreActions.HomePageCategory());

    this.onlineproductsEffects.getOnlineProductsHomePageCategory$
        .pipe(
            filter((action) => action.type === OnlineProductsStoreActions.ActionTypes.HOME_PAGE_CATEGORY_SUCCESS),
            takeUntil(this.destroyed$)
        )
        .subscribe((res) => {
            console.log(res);
            setTimeout(() => {
                this.SelectHomePageCategories = res;
            });
        });
}

方法3：改用async管道（推荐） #

避免手动订阅数据流，直接用Angular的async管道自动管理订阅和变更检测，从根源规避周期冲突：

1. 组件类中定义数据流属性：

import { map } from 'rxjs';

// 组件类内新增属性
homePageCategories$ = this.onlineproductsEffects.getOnlineProductsHomePageCategory$
    .pipe(
        filter((action) => action.type === OnlineProductsStoreActions.ActionTypes.HOME_PAGE_CATEGORY_SUCCESS),
        takeUntil(this.destroyed$)
    );

ngAfterViewInit(): void {
    const filterValue = "";

    this._store$.dispatch(new OnlineProductsStoreActions.GetOnlineProducts(this.filter));
    this._store$.dispatch(new OnlineProductsStoreActions.SearchProduct(filterValue, this.filter));
    this._store$.dispatch(new OnlineProductsStoreActions.HomePageCategory());
}

2. 模板中用async管道绑定数据：

<!-- 替换原有用到SelectHomePageCategories的模板逻辑 -->
<div *ngFor="let category of homePageCategories$ | async">
    <!-- 渲染分类内容 -->
</div>

额外排查点 #

• 检查showProductsDetail属性是否在异步操作中被修改（比如其他订阅或回调），这也可能触发相同错误。
• 确认appMaterialElevation指令内部是否存在修改组件绑定属性的逻辑，导致变更检测后值发生变化。

内容的提问来源于stack exchange，提问作者Arda Erdoğan