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

Question

怎么了？
在控制台中收到以下错误:

AboutComponent.html:1 ERROR 错误:ExpressionChangedAfterItHasBeenCheckedError:检查后表达式已更改。以前的值:'空:未定义'。当前值:'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(); 
  }
}