Question

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

AboutComponent.html：1错误错误：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

当Angular处理时，某些Lifecycle挂钩在渲染部分之前被调用绑定，然后在其中调用某些

参考：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)
  }

Answer 2

您还可以在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(); 
  }
}

角度：错误错误：ExpressionChangedAfterItHasBeenCheckedError：检查表达式后，表达式已更改

2 个答案: