NG0100：ExpressionChangedAfterItHasBeenCheckedError答案

【问题标题】：NG0100: ExpressionChangedAfterItHasBeenCheckedErrorNG0100：ExpressionChangedAfterItHasBeenCheckedError
【发布时间】：2022-11-30 19:45:06
【问题描述】：

我遇到过

NG0100: ExpressionChangedAfterItHasBeenCheckedError

在我的 web 应用程序的在线产品部分，通过添加断点，我找到了问题的根源并添加了 settimeout。但是后来当我选择一个产品并想过滤那个产品时，我在同一个地方遇到了同样的错误。另外，我可以找到什么解决方案而不是settimeout？ error-example

ngOnInit() {
    const filterValue = "";
    setTimeout(() => {
        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) => {
                setTimeout(() => {
                    console.log(res);
                    this.SelectHomePageCategories = res;
                }, 50);
            });

        this.productSearchSubscription = this.onlineproductsEffects.getOnlineProductsBySearch$
            .pipe(
                filter((action) => action.type === OnlineProductsStoreActions.ActionTypes.SEARCH_PRODUCT_SUCCESS),
                takeUntil(this.destroyed$)
            )
            .subscribe((res) => {
                setTimeout(() => {
                    this.onlineproducts = res;
                    this.dataSource = new MatTableDataSource(this.onlineproducts.payload);

                    console.log(this.onlineproducts);
                }, 50);
            });

我发现了问题及其所在，但需要比 settimeout 更多的信息...

【问题讨论】：

标签： angular

【解决方案1】：

请删除所有设置超时秒
设置超时最多在我们不得不使用的时候使用等待对于一些DOM改变。让当前循环结束并在那之后立即做一些事情。在大多数情况下，应该在不分配任何毫秒的情况下使用它（例如您使用的是 50）。这是不正确的，因为您不知道您在等待 50 毫秒的确切时间。并且您正在等待的是每次 50 毫秒后完成。另外设置超时在有角的触发额外的更改检测，这可能会破坏应用程序性能。如果您需要在某些时候尝试使用 setTimeout，请尝试将其包含在其中ngZone.runOutsideAngular打回来。
1. 请将挂钩更改为ngAfterViewInit代替ngOnInit那么这个错误就会消失

【讨论】：