使用AsyncPipe或手动订阅Observable来获取异步数据

示例代码：

在组件类中定义一个Observable属性来获取异步数据，例如：

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    

      {{ item }}
    
  `
})
export class AppComponent {
  data$: Observable;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.data$ = this.dataService.getData();
  }
}

在模板中使用AsyncPipe来订阅Observable并获取异步数据，例如上面的示例代码中的*ngFor。

或者，手动订阅Observable获取异步数据并将其分配给组件属性，例如：

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    

      {{ item }}
    
  `
})
export class AppComponent {
  data: any[];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(data => {
      this.data = data;
    });
  }
}

在这个示例代码中，我们在组件类中定义了一个名为data的数组属性来保存获取到的异步数据，然后在ngOnInit方法中订阅了从数据服务（dataService）中获取数据的Observable，当获取到数据时，通过回调函数将数据赋值给组件属性data，并在模板中使用*ngFor指令来循环渲染数据项。