angular - 这个 Angular 异步管道的正确含义是什么？

Question

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

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

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

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

heroes$: Observable<Hero[]>;

这对我来说并不完全清楚。

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

• *ngFor不能直接迭代heros $因为它是一个Observable。

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

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

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

标签： angularangular6javascript-frameworkangular-pipeangular-observable

Answer 1

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