这个 Angular 异步管道的正确含义是啥？

Posted 2023-02-22

【中文标题】这个 Angular 异步管道的正确含义是啥？

【英文标题】：What is the correct meaning of this Angular async pipe?这个 Angular 异步管道的正确含义是什么？

【发布时间】：2019-04-11 03:14:06

【问题描述】：

我对 Angular 很陌生，我对这段代码有以下疑问。

在一个视图中我有这个代码：

<li *ngFor="let hero of heroes$ | async" >
  <a routerLink="/detail/hero.id">
    hero.name
  </a>
</li>

迭代heroes$。这不是一个数组，而是一个 Observable，因为它正在处理相关组件的这个属性：

heroes$: Observable<Hero[]>;

这对我来说不是很清楚。

按照我的解释（请确认或反驳）。

*ngFor 不能直接迭代 heroes$，因为它是 Observable。

这个 Observable 发出一个 Hero 数组，但这是异步行为。

async 管道是订阅此 Observable 的东西，当它准备好（发出数组时）*ngFor指令可以迭代这个数组。

实际上，通过这种方式，我可以直接在视图中执行此操作，而不是在订阅 Observable 的组件中执行此操作。

【问题讨论】：

你的假设是正确的。

async 管道也会在组件被销毁时自动取消订阅，如 the documentation 中所述。

【参考方案1】：

如果你这样写，那就更清楚了： (heroes$ | async) as heroList