新しいデータに角度レンダリング

Question

私はAngularで簡単なチャットアプリケーションを実装しました。私は@stomp/ng2-stompjsからストンプソケットを使用しています。私はすべてのmeesagesを表示するのに*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を見ることができます）、*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パイプを使用してデータを購読することができます。また、コンポーネントが破棄された場合、パイプはサブスクリプションがクリアされることを確認します。

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>