新数据的角度渲染

Question

我已经用 Angular 实现了一个简单的聊天应用程序。我正在使用来自@stomp/ng2-stompjs 的 stomp 套接字。我正在使用*ngFor 来显示所有消息。

<p *ngFor="let item of messages" style="padding: 5px; font-size: 18px">
    <span style="color:darkturquoise">{{item.author}}</span>: {{item.message}}
  </p>

但是当messages 变量更新时（我可以看到console.log），angular 不会重新渲染*ngFor。

this.subscription = this.messagesObs.subscribe((message: Frame) => {
  this.messages = <ResponseMessage[]>JSON.parse(message.body).slice();
  console.log(this.messages);
});

我试过this.changeDetector.detectChanges();，但没有帮助。 我知道这是框架的默认行为，但是有什么好的方法可以让*ngFor 在每次订阅后呈现？

更新：

我做了一个plunker 的例子。示例将不起作用，因为我的后端位于 localhost 上。

Answer 1

您可以使用 rxjs map 运算符和 angular 中的 async-pipe 来订阅您的数据。如果组件被销毁，管道也会确保订阅被清除。

public messages$: Observable<ResponseMessage[]> = this.messagesObs.map((message: Frame) => {
  return JSON.parse(message.body) as ResponseMessage[];
});

在你的组件视图中：

<p *ngFor="let item of messages$ | async" style="padding: 5px; font-size: 18px">
  <span style="color:darkturquoise">{{item.author}}</span>: {{item.message}}
</p>