直接在模板中绑定 scrollTop 会出错

Question

我正在处理一个 Angular 5 项目。在我的项目中，我有类似元素的聊天框。我在 a 中列出评论ul，其高度固定为overflow-y: auto. 就像一个标准的聊天框，我必须显示这个可滚动的最底部ul。因此，当添加新评论时，它将出现在底部，ul我必须滚动到底部。为了实现这一目标，我绑定scrollTop的这个属性ul为scrollHeight如下，

<ul class="comment-list" #commentEl [scrollTop]="commentEl.scrollHeight">
    <li *ngFor="let comment of comments">{{ comment }}</li>
</ul>

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '851'. Current value: '0'初始化此组件并销毁此组件时出现错误。我该如何解决这个问题？

Answer 1

将ul标签包装在 div 元素中并使用viewChild装饰器引用 DOM 。

HTML

<div style="height:200px;width:100%;overflow-y:auto" #commentEl [scrollTop]="scrolltop">
    <ul class="comment-list">
        <li *ngFor="let comment of comments">{{ comment }}</li>
    </ul>
</div>

TS

@ViewChild('commentEl') comment: ElementRef;  
scrolltop: number = null;

并给出您添加评论的位置

this.scrolltop = this.comment.nativeElement.scrollHeight;

演示链接