Javascript 角度：无法在元素中向下滚动到底部

我一直在推迟修复这个错误，我已经有一段时间了。我有以下聊天窗口：

显示消息的窗口是一个单独的组件（chat window.component.ts）。我想用ngOnChanges滚动到底部

当我们从父组件接收带有消息的对话时，通过异步请求从服务器接收对话，我们希望滚动到窗口元素的底部。我们通过调用ngOnChanges生命周期钩子中类的

this.scrollToBottom（）

方法来实现这一点

This.scrollToBottom确实会被调用，但它不会滚动到元素的底部。有人知道为什么吗？

chat-window.component.ts:在ngOnchanges中，我们在调用它之前先做一些同步操作。scrollToBottom（）

聊天窗口.component.html

<div #window class="window">
  <ng-container *ngFor="let message of conversation.messages">
    <div class="date-container" *ngIf="!message.msg; else windowMsg">
      <p class="date">{{message.date | amDateFormat:'LL'}}</p>
    </div>
    <ng-template #windowMsg>
      <p
        class="window__message"
        [ngClass]="{
    'window__message--left': isItMyMsg(message),
    'window__message--right': !isItMyMsg(message)
    }"
      >
        {{message.msg}}
      </p>
    </ng-template>
  </ng-container>
</div>

{{message.date | amDateFormat:'LL'}

{{message.msg}

当您调用

scrollToBottom

时，由于尚未呈现消息列表，因此滚动条不起作用。要在显示消息后滚动，请在消息容器上设置（例如，

#messageContainer

）：

<ng-container #messageContainer *ngFor="let message of conversation.messages">
  ...
</ng-container>

---

您可以将以下代码添加到HTML元素中

#window [scrollTop]="window.scrollHeight" *ngIf="messages.length > 0"

完整代码根据您的代码示例如下所示

<div #window [scrollTop]="window.scrollHeight" *ngIf="messages.length > 0" class="window">
  <ng-container *ngFor="let message of conversation.messages">
    <div class="date-container" *ngIf="!message.msg; else windowMsg">
      <p class="date">{{message.date | amDateFormat:'LL'}}</p>
    </div>
    <ng-template #windowMsg>
      <p
        class="window__message"
        [ngClass]="{
    'window__message--left': isItMyMsg(message),
    'window__message--right': !isItMyMsg(message)
    }"
      >
        {{message.msg}}
      </p>
    </ng-template>
  </ng-container>
</div>

{{message.date | amDateFormat:'LL'}

{{message.msg}

---

这是我的工作。（目前，我正在使用Angular 11）我忘了添加模板。第二次尝试使用

scrollTop

而不是像这样

this.window.nativeElement.scrollTop=this.window.nativeElement.scrollHeight

我编辑了它。这并没有解决问题。我做了4个控制台日志，看看他们给了我什么。我在做this.window.nativeElement.scrollTop=this.window.nativeElement.scrollheight之前做了两次（scrollTop和scrollheight），之后做了两次。之前的结果是scrollTop为0，scrollHeight为229。对于测试：如果在延迟后滚动，是否有效：

setTimeout（（）=>{this.scrollToBottom（）；}，500）？希望这个链接能帮你找到好答案。多谢康纳
#window [scrollTop]="window.scrollHeight" *ngIf="messages.length > 0"

<div #window [scrollTop]="window.scrollHeight" *ngIf="messages.length > 0" class="window">
  <ng-container *ngFor="let message of conversation.messages">
    <div class="date-container" *ngIf="!message.msg; else windowMsg">
      <p class="date">{{message.date | amDateFormat:'LL'}}</p>
    </div>
    <ng-template #windowMsg>
      <p
        class="window__message"
        [ngClass]="{
    'window__message--left': isItMyMsg(message),
    'window__message--right': !isItMyMsg(message)
    }"
      >
        {{message.msg}}
      </p>
    </ng-template>
  </ng-container>
</div>