*ngFor 回路与异步管道和热插座连接可观察?

Question

>假设我们使用如下*ngFor将警报呈现到列表中：

*ngFor="let alert of alerts | async"

是否可以使alerts属性成为服务器推送到的热可观察对象，并导致包含警报的列表相应地刷新？ 如果是这样，哪种类型的可观察量适合这种类型的上下文？

Answer 1

async管道为您订阅可观察量，随后在不再需要订阅时对其进行清理。您可以将async管道应用于任何可观察量(热或冷)，它将创建一个新订阅以将该可观察量的内容呈现到模板(或通过输入将其传递给子组件)。例如，假设我有一个可观察alerts$：

alerts$: Observable<Alert[]> = alertService.getAlerts();

我想呈现这些警报的列表，就像您在问题中显示的那样：

<ul>
<li *ngFor="let alert of alerts$ | async">{{ alert }}</li>
</ul>

我还可以在我的模板中订阅alerts$ Observable，并对那里的数据做一些事情。

让我们创建另一个属性来保存警报，并创建一个属性来保存订阅以进行清理。

mostRecentAlert: Alert;
alertsSubscription: Subscription;

并在ngOnInit生命周期挂钩中为其赋值。

ngOnInit() {
this.alertsSubScription = alerts$.subscribe((next: Alert[]) => {
mostRecentAlert = next[0];
}
}

然后在ngOnDestroy生命周期挂钩中清理它。

ngOnDestroy() {
this.alertsSubscription.unsubscribe();
}

alerts$现在在技术上是一个"热门"可观察的，因为它有一个有效的订阅，但你仍然可以像以前一样在模板中使用它。

简而言之，async管道只是在模板中订阅可观察量的便捷工具。它允许您在不处理任何清理的情况下呈现异步数据。

为了回答您关于哪种类型的可观察量适合此上下文的问题：每当您通过某种服务或存储(如果您使用 ngrx 或类似的东西)获取数据时，它很可能会以流的形式到达。甚至Angular的Http实用程序也使用rxjs Observables。这允许您使用所有强大的 rxjs 运算符将数据塑造成您想要的形式，并将最终的可观察"冷"保留在组件类中。然后，只需在模板中将async管道放在其上，您就可以以一种非常简洁的方式呈现异步数据或将其传递到其他组件中。