Angular *ngFor遍历Observable报TS2322类型错误解决方案

问题场景 #

开发Angular项目过程中，从Firebase Firestore数据库读取全部分类数据，尝试在sidebar.component.html页面渲染时，出现TS2322类型报错。

报错详情 #

报错的模板代码：

<div class="categories" *ngFor="let category of categories">

控制台抛出的错误信息：

error TS2322: Type 'Observable<Categories[]>' is not assignable to type 'NgIterable<any> | null | undefined'.

关联代码 #

组件逻辑 sidebar.component.ts #

import { Component, OnInit } from '@angular/core';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs/internal/Observable';
import { Categories } from 'src/app/models/categories.model';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
  categoriesCollection: AngularFirestoreCollection<Categories>;
  categories: Observable<Categories[]>;
  snapshot: any;

  constructor(private afs: AngularFirestore) { }

  ngOnInit(){
    this.categoriesCollection = this.afs.collection('categories');
    this.categories = this.categoriesCollection.valueChanges();
    this.snapshot = this.categoriesCollection.snapshotChanges()
        .pipe(
          map(actions => actions.map(a => a.payload.doc.data()))
        )
  }

}

类型定义 categories.model.ts #

export interface Categories {
  id: string;
  name: string;
  reference: string
}

报错原因 #

*ngFor 指令仅支持遍历可迭代对象（如普通数组、Set等结构），但代码中categories是Observable<Categories[]>类型的可观察对象，本身不是可直接遍历的数据集，模板无法直接对其做循环渲染。

解决方法 #

在模板的*ngFor指令中，对Observable类型的categories变量使用Angular内置的async管道即可。async管道会自动订阅可观察对象、接收流发射的最新值，同时会在组件销毁时自动取消订阅，避免内存泄漏。
修改后的模板代码：

<div class="categories" *ngFor="let category of categories | async">
<!-- categories为Observable类型数据 -->

*该解决方案由Stack Overflow用户R. Richards提供。

内容的提问来源于stack exchange，提问作者Stéphane Konan