Angular12/rxjs:更新模板中的可观察数据并显示模板中的更改

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

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

  constructor() {
    this.data$ = new Observable<string>((observer) => {
      // 在这里可以进行异步操作，例如从服务器获取数据
      // 当数据准备好后，调用observer的next方法发送数据
      observer.next('Initial data');
    });
  }

  updateData() {
    // 在这里可以更新数据，并通过调用observer的next方法发送新数据
    this.data$.next('Updated data');
  }
}