新邮件滚动到底部

我有一个角度应用程序,每当有新消息到达时,我都会遇到聊天容器中自动滚动到底部的问题。

我的模板

<div #msgContainer class="chat-box-body" appInfiniteScroll (scrollTop)="loadOlderMessages()">
 <ng-container *ngFor="let msg of conversation.messages.edges">
  <ng-container *ngIf="msg.node?.from?.id !== currentUser.id; else myMsg">
    <div class="sender-msg-block">
      <div class="wrapper-left">
        <img class="sender-dp"
             [src]="conversation.conversation_participants[0].conversable?.profile_picture?.url ||  'assets/images/no-user.svg'">
        <p class="sender-msg">{{msg.node.body}}</p>
        <span class="sender-time">{{msg.node.created_at}}</span>
      </div>
    </div>
  </ng-container>
  <ng-template #myMsg>
    <div #newMesssage class="receiver-msg-block">
      <div class="wrapper-right">
        <span class="receiver-time">{{msg.node.created_at}}</span>
        <p class="receiver-msg">
          {{msg.node.body}}
        </p>
      </div>
    </div>
  </ng-template>
</ng-container>

当我收到新消息时。此订阅在此函数中激发:

listenIncomingMessages() {
this.chatService.messageReceived$
  .pipe(
    takeWhile(() => this.isAlive)
  )
  .subscribe((data: any) => {
    if (data) {
      const newEdge = {
        node: data
      };
      if (data.conversation_id === this.conversationId) {
        this.conversation.messages.edges = <any>[...this.conversation.messages.edges, newEdge];
        // TODO: Scroll to bottom not working
        this.msgContainer.nativeElement.scrollTop =
          this.msgContainer.nativeElement.scrollTop + this.newMesssage.nativeElement.scrollHeight;
      }
    }
  });
}

请帮忙。谢谢:)