请向我解释为什么我一直得到这个错误:ExpressionChangedAfterItHasBeenCheckedError:表达式已经改变后,它被检查。

显然,我只有在开发模式下才会遇到这种情况,在我的产品构建中不会出现这种情况,但这非常烦人,而且我根本不明白在我的开发环境中出现错误而不会在prod上显示的好处——可能是因为我缺乏理解。

通常,修复很简单,我只是把导致错误的代码包装在setTimeout中,就像这样:

setTimeout(()=> {
    this.isLoading = true;
}, 0);

或者使用如下构造函数强制检测更改:

this.isLoading = true;
this.cd.detectChanges();

但是为什么我总是遇到这个错误呢?我想要了解它,这样我就可以在将来避免这些俗套的修复。


当前回答

我使用的是ng2-carouselamos (Angular 8和Bootstrap 4)

下面这些步骤解决了我的问题:

实现AfterViewChecked 添加构造函数(私有changeDetector: ChangeDetectorRef) {} 然后ngAfterViewChecked(){this.changeDetector.detectChanges();}

其他回答

有一些有趣的答案,但我似乎没有找到一个符合我的需求,最接近的是来自@chittrang-mishra,它只指一个特定的功能,而不是像我的应用程序中那样有几个切换。

我不想使用[隐藏]利用*ngIf甚至不是DOM的一部分,所以我找到了以下解决方案,这可能不是最好的,因为它抑制错误而不是纠正它,但在我的情况下,我知道最终结果是正确的,这似乎对我的应用程序是可以的。

我所做的是实现AfterViewChecked,添加构造函数(私有changeDetector: ChangeDetectorRef){},然后

ngAfterViewChecked(){
  this.changeDetector.detectChanges();
}

我希望这能帮助到其他人,就像其他人帮助过我一样。

我面临着同样的问题,因为我的组件中的一个数组的值发生了变化。但是我没有检测值变化的变化,而是将组件变化检测策略改为onPush(它将检测对象变化的变化,而不是值变化的变化)。

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

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush
    selector: -
    ......
})

我也遇到过类似的问题。查看生命周期钩子文档,我将ngAfterViewInit更改为ngAfterContentInit,它工作正常。

我得到这个错误,因为我在模式中调度redux动作,当时模式还没有打开。我正在调度动作的瞬间模态组件接收输入。所以我把setTimeout放在那里,以确保模式是打开的,然后动作被分派。

在我的例子中,我在运行测试时在规范文件中遇到了这个问题。

我必须把ngIf改成[hidden]

<app-loading *ngIf="isLoading"></app-loading>

to

<app-loading [hidden]="!isLoading"></app-loading>