javascript - 滚动顶部在 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

一旦 Angular 元素准备就绪，将滚动条调至顶部或底部

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

  ngAfterViewChecked() {
    this.scrollBottom()
  }

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

SLACKBLITZ