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

【问题标题】：Binding scrollTop directly in template gives error直接在模板中绑定 scrollTop 会出错
【发布时间】：2018-09-26 21:59:54
【问题描述】：

我正在做一个 Angular 5 项目。在我的项目中，我有类似元素的聊天框。我在ul 中列出了cmets，它的高度用overflow-y: auto 固定。就像一个标准的聊天框一样，我必须显示这个可滚动的ul 的最底部。因此，当添加新评论时，它将出现在ul 的底部，我必须滚动到底部。为了实现这一点，我将ul 的scrollTop 属性绑定到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'。我该如何解决这个问题？

【问题讨论】：

标签： angular

【解决方案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>

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

并给出添加 cmets 的位置

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

演示link

【讨论】：

这种方法不能解决错误。这与我的代码相同。唯一的区别是您将元素包装在一个 div 中。我试过你的解决方案。但错误依然存在
你检查过演示链接吗？我能知道你到底需要什么吗？我想我误解了你
滚动到底部工作正常。但是请再看看这个问题。当组件被销毁时，我收到问题中提到的错误。
我能知道你的组件是如何创建和销毁的吗？是否为动态组件
这个组件在 Angular Material 选项卡中被调用。组件在相应的选项卡处于活动状态时初始化，并在移动到另一个选项卡时销毁。