更新Angular 5数据表时如何保持垂直滚动？

Question

我想经常使用从JSON REST API中提取的新数据更新我的数据表(Covalent td-data-tablewith several ng-template).比浏览器更多的行,因此用户可能需要垂直滚动.但是当我更新表格中的数据时,它会完全重绘,即垂直滚动位置重置到顶部,工具提示闪烁等等.

黑客可以保存/恢复垂直滚动,例如下面的工作,但是它们会造成很多视觉混乱,特别是在Firefox中.

// save vertical scroll
this.scrollTop = this.tableElt.nativeElement.querySelector('.td-data-table-scrollable').scrollTop;

// update table data here
this.data = newData;

// restore vertical scroll
setImmediate(() => {
    this.tableElt.nativeElement.querySelector('.td-data-table-scrollable').scrollTop = this.scrollTop;
  }
});

如何干净地更新表格(或任何组件)中的数据,而不是黑客重置滚动位置并忍受大量闪烁行为？

如果没有使用Covalent数据表的解决方案,是否有另一个Angular 2+控件可以正确处理？

问题的动画捕获:数据更新时垂直滚动快照.应跨数据更新维护垂直滚动.

Answer 1

您可以尝试使用trackBy函数.此函数将用于确定*ngFor已更改的行以优化重绘.

<tbody>
<tr td-data-table-row *ngFor="let row of basicData; trackBy: getRowId">
  <td td-data-table-cell *ngFor="let column of columns" [numeric]="column.numeric">
    {{column.format ? column.format(row[column.name]) : row[column.name]}}
  </td>
  <td td-data-table-cell (click)="openPrompt(row, 'comments')">
    <button mat-button [class.mat-accent]="!row['comments']">{{row['comments'] || 'Add Comment'}}</button>
  </td>
</tr>
</tbody>

然后在你的打字稿中:

getRowById(index, row) {
   // Return some unique primitive idenitifier (string, number, etc.)
   return row['some unique property'];
}

有关trackBy结账的更多信息:

https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5 https://blog.angular-university.io/angular-2-ngfor/

此外,NGX-Datatable非常适合这种用例.它内置了虚拟滚动功能.https://github.com/swimlane/ngx-datatable

Answer 2

我建议您切换到角度材质并将其绑定到可观察的数据源。

https://material.angular.io/components/table/overview#observable-stream-of-data-arrays

当数据源（Observable）更新为新数据时，它将更新 DOM，并且不需要跟踪滚动事件。

如果您担心页面上列出的项目数量，可以通过简单的方式支持分页；。 https://material.angular.io/components/table/overview#pagination

旁注：切换到角度材料，因为它们的组件有详细的文档记录，并附有示例和示例代码，如果您遇到困难，请告诉我。