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

Question

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

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

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

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

heroes$: Observable<Hero[]>;

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

根据我的解释(请确认或反驳(。

• *ngFor不能直接迭代英雄$，因为它是可观察。

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

• async管道是订阅此Observable的管道，并且当它准备好时(当发出数组时(，*ngFor指令可以在此数组上迭代。

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

Answer 1

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