如何在使用异步ngOnInit时/之后更新视图？

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  data: any;

  constructor(private cdr: ChangeDetectorRef) { }

  ngOnInit(): void {
    // 使用Observable模拟异步操作获取数据
    const asyncData = new Observable(observer => {
      setTimeout(() => {
        observer.next('异步数据');
        observer.complete();
      }, 2000);
    });

    asyncData.subscribe(data => {
      this.data = data;
      // 手动触发变更检测
      this.cdr.detectChanges();
    });
  }
}