Angular 18中如何用@for结合async管道遍历Observable数组？

在 Angular 新的控制流语法里，@for 不能直接遍历 Observable 类型的对象，必须先通过 async 管道解析出实际的数组值，再进行遍历。你可以借助 @let 指令先把解析后的结果存为一个模板变量，再用 @for 遍历这个变量。

基础正确写法 #

<!-- 先用@let接收async管道解析后的数组 -->
@let items = items$ | async;

<!-- 遍历解析完成的数组 -->
@for (item of items; track item.id) {
  <div>{{ item.name }}</div>
}

处理空值的安全写法（推荐） #

如果你的 Observable 可能返回 null 或 undefined，建议加上 @if 判断避免模板报错：

@let items = items$ | async;

@if (items) {
  @for (item of items; track item.id) {
    <div>{{ item.name }}</div>
  }
}

原写法失效的原因 #

*ngFor 是结构性指令，内部会自动处理 async 管道的订阅、值解析与销毁逻辑；而新的 @for 属于原生控制流语法，它要求 of 后面必须是同步的数组/可迭代值，而非 Observable 这类异步对象，所以必须先通过 async 管道把 Observable 转换成同步的数组值，再交给 @for 处理。

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