Angular RXJS 长轮询答案

【问题标题】：Angular RXJS Long PollAngular RXJS 长轮询
【发布时间】：2020-06-22 20:26:34
【问题描述】：

我有一个为前端维护存储的后端。每次点击我都会返回完整的存储，其中包括应呈现的消息数组。

通过服务中实现的长轮询从后端获取数据。

问题是：DOM 不会随着每个 cll 更新到后端，我试图只渲染更新而不是完整的数组。

当前植入 POM 会随着每次命中而更新。有办法解决吗？？

我尝试了以下代码：

在我的 html 模板中：

<div *ngFor="let message of messages$ | async">
{{message}}
</div>

在组件 ts 文件中：

messages$ = storeService.messages;
ngOnInit(){
this.messages$.subscribe();
}

店内服务：


  get messages(): Observable<any> {
    return this._messages.asObservable();
  }
 
  private _messages = new BehaviorSubject<any[]>([]);
 
  messages$ = this._messages.asObservable()

 storeGet$ = this.http.get(EndPoint)
getStore(){
return timer(0, 15000).pipe(
        concatMap(() => storeGet$),
        map(resp => {
 
          this._messages.next(resp['messages'])
        })
      )
}

【问题讨论】：

标签： angular rxjs observable long-polling behaviorsubject

【解决方案1】：

你只需要

messages$ = timer(0, 15000).pipe(
  switchMap(_ => this.http.get(EndPoint)),
  map(resp => resp['messages'])
)

【讨论】：

我需要将此民意调查保留在服务中，因为许多其他组件将使用它。
这就是你放入服务的内容，如果多个组件需要最新的池结果，可以在流的末尾添加一个 shareReplay()。

【解决方案2】：

ngForlet 变量存在错误。 “ngFor”应该是这样的

<div *ngFor="let message of messages$ | async">
    {{message}}
</div>

【讨论】：