Angular模板用*ngFor遍历Observable经async管道返回值报TS2322怎么解决？

报错核心原因 #

你定义的observablesEx01()返回值是Observable<number>类型，它每次推送的都是单个数字值，但*ngFor指令仅支持遍历NgIterable类型的集合（比如数组、Set、Map这类可迭代结构），单个数字不属于可迭代类型，自然会触发类型不匹配的报错。
另外你直接在模板里把方法调用传给async管道也不符合最佳实践：Angular每次变更检测运行时都会重新调用该方法生成新的Observable实例，会导致重复订阅、额外的性能开销。

修复方案 #

按需选择以下两种方向即可：

方案1：调整Observable推送数组类型，适配*ngFor遍历 #

如果你需要把所有推送的值组成集合遍历，可以用RxJS的scan操作符累加历史值，或者直接调整Observable的返回类型为数组：

import { Observable, scan } from 'rxjs';

// 无需改动原始发射逻辑，用scan累加结果为数组
observablesEx01() {
  return new Observable<number>(s => {
    s.next(1);
    s.next(2);
    s.next(3);
    setTimeout(() => {
      s.next(4);
      s.complete();
    }, 1000);
  }).pipe(
    scan((acc, curr) => [...acc, curr], [] as number[])
  );
}

// 组件类提前把Observable赋值给类属性，避免模板内重复调用方法
public numList$ = this.observablesEx01();

模板保持原有逻辑即可：

<p *ngFor="let item of numList$ | async">{{item}}</p>

方案2：直接展示单个值，移除*ngFor #

如果你只需要展示最新推送的单个数字，不需要遍历历史值，直接去掉*ngFor指令即可：

<!-- 同样推荐用类属性存储Observable -->
<p>{{ num$ | async }}</p>

内容的提问来源于stack exchange，提问作者NestorArturo