更新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>

然后在你的打字稿中：

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

SideNote：切换到角度材料，因为它们的组件已有详细记录，包含示例和示例代码 如果你遇到困难，请告诉我。

Answer 3

看起来当您获得更多数据时，您正在刷新整个列表（* ngFor中使用的数组），因此angular再次重新绘制全表。尝试仅将差异数据推送到该阵列。

Answer 4

将数据推送到* ng所使用的相同数组变量，不会重新渲染html。

简单示例：https://angular-frjdnf.stackblitz.io

修改

我使用* ngFor创建了一个带共价表的示例项目，只更改了角度，而不是重新渲染整个表格。

链接到Stackblitz.io sample project。

<强> HTML

<button (click)="addData()">Add Data</button>
<table td-data-table>
    <thead>
    <tr td-data-table-column-row>
      <td td-data-table-column *ngFor="let column of columns">
        {{column.label}}
      </td>
    </tr>
    </thead>
    <tbody>
    <tr td-data-table-row *ngFor="let row of basicData">
      <td td-data-table-cell *ngFor="let column of columns">
        {{ row[column.name] }}
      </td>
    </tr>
    </tbody>
  </table>

<强> TS

basicData包含已加载到表格中的初始数据，我只是在点击“添加数据”时推送一些虚拟数据。按钮到basicData以测试滚动条。

import { Component } from '@angular/core';
import { ITdDataTableColumn } from '@covalent/core/data-table';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  columns: ITdDataTableColumn[] = [
    { name: 'first_name',  label: 'First Name' },
    { name: 'last_name', label: 'Last Name' },
    { name: 'gender', label: 'Gender' }
  ];

  count = 0;

  basicData: any[] = [
    {
      "first_name": "Sully",
      "gender": "Male",
      "last_name": "Clutterham"
    },
    ...
  ]

  additionalData: any[] = [
    {
      "first_name": "Sully",
      "gender": "Male",
      "last_name": "Clutterham"
    },
    ...
  ]

  addData(){
    if(this.count >= this.additionalData.length)
      this.count = 0;

    this.basicData.push(this.additionalData[this.count]);
    this.count++;
  }

}

希望这有帮助。