ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'ngIf: false'。当前值：'ngIf: true'答案

【问题标题】：ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'ngIf: false'。当前值：'ngIf: true'
【发布时间】：2018-01-25 00:26:43
【问题描述】：

演示： https://stackblitz.com/angular/mxoemeygmlk?file=app%2Ftable-http-example.ts

这个角度误差的最佳解决方案是什么：

【问题讨论】：

标签： javascript html angular

【解决方案1】：

我知道的解决方案（hack）是使用setTimeout(function , 0)，它会将您的函数发送到事件循环的末尾，直到 angular 完成检查，如下所示：

  constructor(private http: HttpClient) {}

  ngAfterViewInit() {
    setTimeout(() => this.ngAfterViewInitUtil(), 0);
  }
  ngAfterViewInitUtil(){
    this.exampleDatabase = new ExampleHttpDao(this.http);
    // The rest of the code

还要注意，这个错误只会在开发模式下发生，不会在生产模式下发生，因为 Angular 不会在生产模式下重新检查应用程序的状态。

您可以在this page 中阅读有关此错误的更多信息

【讨论】：

我刚刚阅读了这篇文章，我仍然有疑问，因为没有解决方案，但是黑客。我的实际解决方案是在变量更改后调用 ChangeDetectorRef detectChanges。
我不认为这是值得的，因为这个错误是为了确保模型的稳定性（我们知道你的模型是）所以恕我直言，没有必要使代码复杂化。如果您希望其他编码人员可以阅读代码，可以将 setTimeout 包装在一个具有描述性名称的函数中。

【解决方案2】：

使用 setTimeout 不是解决此问题的正确方法你应该使用

ChangeDetectorRef

constructor( private cdr: ChangeDetectorRef){}
  ngOnInit(){
  this.chu.checkShow.subscribe( value => {
      // do something
      this.cdr.detectChanges();
  });
}

【讨论】：

这对我有用。我只是在我知道值更改的代码行上添加了 this.cdr.detectChanges() ，然后我就不再收到错误了。