Question

我有一个div消息，我想确定何时检索到所有聊天信息以将div向下滚动到底部到最后一条消息，但是它不起作用，这给了我错误：

无法读取null的属性'scrollHeight'

TS聊天组件

 ngOnInit() {
    this.chat$ = this._cs.joinUsers(source).pipe(tap(() => this.scrollBottom()));
  }

  scrollBottom() {
    const CHAT_BODY = document.getElementById("card-body");
    CHAT_BODY.scrollTop = CHAT_BODY.scrollHeight;
  }

注释： card-body

正在加载chat$ | async元素

我尝试使用finallize()和ngAfterViewInit()，但没有运气。但是，如果我在看到页面上的所有内容后从scrollBottom()的{{1}}复制了代码，则效果很好。因此，问题在于正在获取触发器，而Observable尚未完成。也许？

我的问题与我在SO上看到的其他解决方案不同，因为它们未使用可观察到的元素，而在触发可观察到的元素时尚不存在。

更新：

我尝试使用console访问元素，并收到此错误：

我收到此错误：未定义的属性'nativeElement'

ViewChild

HTML

  @ViewChild("cardBody")
  cardBody: ElementRef;
  ngAfterViewInit() {
    console.log("Values on ngAfterViewInit():");
    console.log(this.cardBody.nativeElement );
  }

Answer 1

最终能够获得解决方案：

解决方案1）

 <div  class="card-body msg_card_body" id="card-body" #cardBody
  [scrollTop]="cardBody.scrollHeight">
 .
 .
 </div>

解决方案2）

ngAfterViewInit() {
    setTimeout(() => {
     this.scrollBottom();
    }, 500);  
}
scrollBottom() {
  const CHAT_BODY = document.getElementById("card-body");
  CHAT_BODY.scrollTop = CHAT_BODY.scrollHeight;
}

当“可观察”完成时，将div滚动到底部

1 个答案: