滾動頂部在 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;
  }

SLACKBLITZ

Answer 2

就我而言，我想在添加新評論時向下滾動評論列表。
但邏輯是一樣的。
我定義了一個變量scrollDown: number; 我恢復評論列表是這樣的：

@ViewChild('commentList') commentList: ElementRef;

然后，當添加評論時：

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

最后，在模板中：

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

Answer 3

[臨時快速修復] 添加計時器對我有用，

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