Angular执行不必要的异步验证并抛出ExpressionChangedAfterItHasBeenCheckedError

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

@Component({
  selector: 'app-example',
  template: `
    <div>{{ data }}</div>
  `,
})
export class ExampleComponent implements OnInit {
  data: string;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    setTimeout(() => {
      this.data = 'Updated data';
      this.cdr.detectChanges(); // 手动触发变更检测
    }, 1000);
  }
}

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

@Component({
  selector: 'app-example',
  template: `
    <div>{{ data }}</div>
  `,
})
export class ExampleComponent implements OnInit {
  data: string;

  constructor(private ngZone: NgZone) {}

  ngOnInit() {
    this.ngZone.run(() => {
      setTimeout(() => {
        this.data = 'Updated data';
      }, 1000);
    });
  }
}

import { Component } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-example',
  template: `
    <div>{{ data$ | async }}</div>
  `,
})
export class ExampleComponent {
  data$: Observable<string>;

  constructor() {
    this.data$ = new Observable<string>(observer => {
      setTimeout(() => {
        observer.next('Updated data');
        observer.complete();
      }, 1000);
    });
  }
}