Angular ExpressionChangedAfterItHasBeenCheckedError with @Input() to child views

Question

我有一个包含内容的子视图

export class ChildViewComponent implements OnInit {
  @Input() loading = true;
}

父组件如

export class ParentViewComponent implements OnInit {
  loading = true;

  getList() {
    this.myService.getList().subscribe(() => {
      this.loading = false;
    });
  }
}

和parent-view.component.html

<app-child-view [loading]="loading"></app-child-view>

但是当 loading 值改变时，它给出错误

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. 
Previous value: 'loading: true'. Current value: 'loading: false'.

Answer 1

将此添加到子组件

constructor(private cd: ChangeDetectorRef) { }

ngAfterViewInit(): void {
    ...
    this.cd.detectChanges();
}

Angular ExpressionChangedAfterItHasBeenCheckedError with @Input() to child views

Angular ExpressionChangedAfterItHasBeenCheckedError with @Input() to child views

angular

angular-changedetection