Question

假设我们使用*ngFor将警报渲染到列表中，如下所示：

*ngFor="let alert of alerts | async"

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

Answer 1

async管道为您订阅Observable，随后在不再需要时清理订阅。您可以将async管道应用于任何Observable，无论是热管还是冷管，它将创建一个新的Subscription，以将该Observable的内容呈现给模板（或通过输入将其传递给子组件）。例如，假设我有一个alerts$ Observable：

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

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

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

我也可以在我的模板中订阅警报$ Observable并在那里处理数据。

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

mostRecentAlert: Alert;
alertsSubscription: Subscription;

并在ngOnInit生命周期钩子中给它一个值。

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

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

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

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

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

回答关于Observables的类型适合此上下文的问题：无论何时通过某种服务或商店获取数据（如果您使用的是ngrx或类似的东西），它最有可能以流的形式出现。甚至Angular的Http实用程序也使用rxjs Observables。这允许您使用所有强大的rxjs运算符将数据转换为您想要的形式，并在组件类中保留最终的Observable“冷”。然后只需在模板中抛出async管道，就可以非常巧妙地呈现异步数据或将其传递给其他组件。

* ngFor循环与异步管道和热插拔连接可观察？

1 个答案: