Angular 17中如何正确使用async管道处理数组？

你的代码核心问题是Promise定义存在语法错误：箭头函数的函数体缺少闭合大括号，导致setTimeout内的res调用无法执行，Promise永远不会resolve，因此视图一直显示空状态提示。

修复组件代码 #

将Promise的定义修正为：

testAsyncNumber = new Promise(
  (res, rej) => {
    setTimeout(() => {
      res([1, 2, 3, 4, 5]);
    }, 2000);
  }
);

模板代码无需改动 #

你当前的视图模板写法是正确的：

<div>
  @for (number of (testAsyncNumber | async); track number) {
    {{ number }}
  } @empty {
    Empty list of users
  }
</div>

修复Promise语法后，async管道会自动订阅Promise，当2秒后Promise resolve返回数组时，@for循环会正常渲染列表数据。

额外提示：

• Promise是一次性的，仅能推送一次数据，如果需要后续动态更新列表，建议使用Observable（如BehaviorSubject）替代Promise，配合async管道支持多次数据推送；
• 若组件使用ChangeDetectionStrategy.OnPush策略，需确保Promise resolve时触发变更检测（默认策略下无需额外操作）。

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