Scroll Top在angular2中无法正常工作

Question

我创建了一个表，其中的行被动态填充。我有一个添加按钮，我也可以在其中添加行。在这里，我想在添加一行之后在底部的表中显示新添加的行，所以我正在使用以下代码是component.ts。

this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;

但是上面的代码似乎无法正常工作。 问题是，当我添加新行时，滚动不会完全转到div标签的底部，因此看不到新行。

下面是我的html代码，其中我在div标记内使用表格，如下所示。

<div style="height:200px;overflow-y:auto">
    <table class="table table-bordered table-hover">
        <thead>
        <tr class="d-flex">
            <th class="col-3">Q.No</th>
            <th class="col-4">Record Answer</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let answer of answerPaper; let i = index" class="d-flex">
            <td class="col-3">answer.no</td>
            <td class="col-4">answer.name</td>
        </tr>
        </tbody>
    </table>
</div>
<button (click)="addrow()">Add Row</button>

下面是component.ts

public addRow(){
    this.answerPaper.push({});
}

我也在发布滚动条的图像。

当我添加新行时，滚动条没有完全移到div的底部，因此看不到新添加的行

我在哪里出错了？

Answer 1

对于我来说，我想在添加新评论时向下滚动到评论列表。
但是逻辑是一样的。
我定义了一个变量scrollDown: number;，然后像这样恢复评论列表：

@ViewChild('commentList') commentList: ElementRef;

然后，在添加注释时：

this.scrollDown = this.commentList.nativeElement.scrollHeight;

最后，在模板中：

<div #commentList class="document-comments-list" [scrollTop]="scrollDown">

Answer 2

角度元素准备好后，将滚动滚动到顶部或底部

  @ViewChild('scroll', { read: ElementRef }) public scroll: ElementRef<any>;

  ngAfterViewChecked() {
    this.scrollBottom()
  }

  public scrollBottom() {
    this.scroll.nativeElement.scrollTop = this.scroll.nativeElement.scrollHeight;
  }

SLACKBLITZ

Answer 3

[临时快速修复]添加计时器对我有用，

ngAfterViewChecked() {
  setTimeout(this.scrollBottom(), 500)
}