加载异步管道时如何将新消息添加到数组列表？

Question

我正在与 Socket.io 聊天。加载异步管道时如何将新消息添加到数组列表？是不是太复杂了？我应该改用 subscribe 因为它更容易吗？

<ul class="chat-messages-show-list">
    <li *ngFor="let message of output">
      <p>
        <b>{{ message.userName }}</b>
      </p>
      {{ message.text }}
    </li>
</ul>

output: any[] = [];
this.chatService.listen('message-broadcast')
.subscribe((result) =>{
  this.output.push(result);
});

异步管道

<ul class="chat-messages-show-list">
  <ng-container *ngIf="(output$ | async) as output">
    <li *ngFor="let message of output">
      <p>
        <b>{{ message.userName }}</b>
      </p>
      {{ message.text }}
    </li>
  </ng-container>
</ul>

output$!: Observable<any>;
//How to add a new message to an array list when it's async pipe loaded?
this.output$ = this.chatService.listen('message-broadcast');

this.chatService.listen：监听新消息事件（socket.io）。它 returns 我 JSON 如下所示：

{
    userName: "username1",
    text: "Text Typed by User"
}

Answer 1

您可以使用scan将所有消息累积到一个数组中：

组件:

public messages$ = this.chatService.listen('message-broadcast').pipe(
    scan((all, message) => all.concat(message), [])
);

模板:

<ul class="chat-messages-show-list">
  <li *ngFor="let message of messages$ | async">
    <p>
      <b>{{ message.userName }}</b>
    </p>
    {{ message.text }}
  </li>
</ul>

加载异步管道时如何将新消息添加到数组列表？

How to add a new message to an array list when it's async pipe loaded?

rxjs

angular