在angular模板中使用异步操作中的变量

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

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

  constructor() {
    this.asyncData = this.getAsyncData();
  }

  getAsyncData(): Promise<string> {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('异步数据');
      }, 2000);
    });
  }
}

<div>{{ asyncData | async }}</div>