Angular：错误错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改

Question

怎么了？ 在控制台中出现以下错误：

AboutComponent.html:1 ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'null：未定义'。当前值：'null: [object Object]'。

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

export class Test {

}

@Component({
  selector: 'app-about',
  template: `
    {{asd}}
  `
})
export class AboutComponent implements AfterViewInit {

  asd: Test;

  ngAfterViewInit(): void {
    this.asd = new Test();
  }
}

Answer 1

您还可以在 ngAfterViewInit() 中进行更改后强制更改检测：

import { AfterViewInit, Component, ChangeDetectorRef} from '@angular/core';

export class Test {

}

@Component({
  selector: 'app-about',
  template: `
    {{asd}}
  `
})
export class AboutComponent implements AfterViewInit {

  asd: Test;

  constructor(
    private cdRef: ChangeDetectorRef   
  ) { }

  ngAfterViewInit(): void {
    this.asd = new Test();
    this.cdRef.detectChanges(); 
  }
}  

Answer 2

Angular 处理时，在渲染部分之前调用了一些生命周期钩子 绑定和一些在此之后调用

参考：https://blog.angularindepth.com/a-gentle-introduction-into-change-detection-in-angular-33f9ffff6f10

错误是由于在处理完所有绑定后 Angular 调用了这个 ngAfterViewInit 方法。要消除此错误，您可以执行以下操作

将您的代码移动到 ngOnInit 生命周期挂钩中

ngOnInit() {
    this.data = new Test()
}

或者

将代码封装在 setTimeout() 中

 ngAfterViewInit() {
    setTimeout(()=>this.data = new Test(),0)
  }

关于同一问题的精彩文章： https://blog.angular-university.io/angular-debugging/