*ngFor 循环与异步管道和热套接字连接可观察？答案

【问题标题】：*ngFor loop with async pipe and hot socket connected observable?*ngFor 循环与异步管道和热套接字连接可观察？
【发布时间】：2018-01-10 22:29:39
【问题描述】：

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

*ngFor="let alert of alerts | async"

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

【问题讨论】：

这就是异步管道的作用——解包一个可观察对象并在收到新数据时更新。你有没有试过这个，它不工作？或者你只是在问你的方法在概念上是否正确？
我希望有一个示例，其中 Observable<Alert[]> 在 ngOnInit() 中初始化，但仍与服务器保持联系并被服务器推送，从而导致表自动更新新警报.到目前为止，我看到的所有示例都通过发出新的 http 客户端休息请求来刷新 Observable，用从 http 请求返回的新的冷 observable 替换 observable 引用。在这种情况下，看起来整个表格都必须重新渲染。
Angular 是否有办法接收对可观察对象的增量更新，这些更新是热更新（换句话说，它们正在添加到可观察对象的当前状态）而不是替换它，并且它是否也有一个仅呈现更新、添加、删除的方式（我认为这就是 react 所做的......）......可能是一个不同的问题......
好吧，react 与不可变状态一起工作，所以它推送整个状态，这正是 rxjs 所做的。我相信它们的工作方式完全相同。通过使用“热”可观察对象，您关闭对对象的引用，并修改该对象，从而打破不变性。这不是世界末日，但在做状态时，人们普遍认为应该尽可能使用不变性。
重新阅读您的请求后，听起来您想要一个带有websocket 连接的可观察对象，而不是http 休息调用，对吗？这样，当从服务器发布新数据时，您的 websocket 连接将读取它并更新 observable，而不是每次获取数据时都发出新的 http 请求。我理解正确吗？

标签： javascript angular sockets rxjs

【解决方案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>

我还可以在我的模板中订阅 alerts$ 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 管道放在它上面，您就有了一种非常巧妙的方式来呈现异步数据或将其传递给其他组件。

【讨论】：

很好的解释
很好的答案 - 你知道是否有办法让 observable 引用实时连接到 alertService？我假设在上述情况下，用户必须单击按钮或触发某些导致 alertService 刷新可观察警报的事件？
@Ole 是的，就是所谓的websocket连接