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

Question

我想使用从 JSON REST API 中提取的新数据经常更新我的数据表(Covalent td-data-table 和多个 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>

然后在你的 typescript 中:

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