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运算符和async - 来自angular的管道来订阅您的数据。如果组件被销毁，管道也将确保清除订阅。

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>

角度渲染新数据

1 个答案: