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

一旦角度元素准备就绪，将滚动到顶部或底部

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

  ngAfterViewChecked() {
    this.scrollBottom()
  }

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

松弛闪电战