Angular Error NG0100: ExpressionChangedAfterItHasBeenCheckedError 每次我滚动

Question

所以我正在构建一个聊天应用程序，每次您发送消息时，您都会自动滚动到底部，我使用此代码来执行此操作

.html

<div class="chatContent" #scrollMe [scrollTop]="scrollMe.scrollHeight">

.ts

    @ViewChild('scrollMe') scrollMe;
    this.shouldScroll = this.scrollMe.scrollTop + this.scrollMe.clientHeight ===this.scrollMe.scrollHeight;
             if (!this.shouldScroll) {
               this.scrollToBottom();
             }
        
  scrollToBottom() {
    this.scrollMe.scrollTop = this.scrollMe.scrollHeight;
  }

出现这个错误

我已经看到这篇帖子Binding scrollTop directly in template gives error，但刷新页面后仍然出现该错误

Answer 1

添加检测更改方法以便更新 DOM 值。

导入ChangeDetectorRef

import { ChangeDetectorRef } from '@angular/core';

同时添加constructor

constructor( private cdr: ChangeDetectorRef)

然后在更新滚动值时添加您的方法。

 scrollToBottom() {
    this.scrollMe.scrollTop = this.scrollMe.scrollHeight;
    this.cdr.detectChanges();
  }