teradata-covalent 数据 Table 滚动和页面上的重新渲染数据运行缓慢 angular 2+

Question

我在我的项目中使用 Angular 2+ 和 Teradata 共价数据 Table。我有 table 有很多列和 50 行。由于某些原因，在 html 代码中我只看到大约 12 行并滚动。当我滚动时，它会重新呈现数据并显示其他 12 行，因此页面运行缓慢。

有一些html:

<td-data-table
        #dataTable
        [(ngModel)]="selectedRows"
        [data]="filteredData"
        [columns]="columns"
        [selectable]="true"
        [multiple]="true"
        [sortable]="true"
        [sortBy]="sortBy"
        [sortOrder]="sortOrder"
        (sortChange)="sort($event)"
        (rowSelect)="rowSelect($event)"
        (selectAll)="selectAllEvent($event)"
        class="fixed-header">

      <ng-template tdDataTableTemplate="Id"
            let-value="value"
            let-row="row"
            let-column="column">
        <ng-container *ngIf="row['Source'] == 1; else elseTemplate">
          ...
        </ng-container>
        <ng-template #elseTemplate>
          ...
        </ng-template>
      </ng-template>

      <ng-template tdDataTableTemplate="Rate"
            let-value="value"
            let-row="row"
            let-column="column">
      ...
      </ng-template>

我该如何解决这个问题？

也许 covalent 有一些标志可以一次渲染所有 50 行而不重新渲染？

Answer 1

我在 angular material 组件（步进器）上遇到了同样的问题，原因是动画。所以，我为您准备了 3 个解决方案：

解决方案一，如果你不关心动画：

尝试使用 NoopAnimationsModule 而不是 BrowserAnimationsModule。

方案二，如果你喜欢冒险，乐观：

尝试将您的 Angular 更新到最新版本。我注意到从 5 升级到 7 时动画有很大的不同。Angular 升级工具可以帮助您解决这个问题。

解决方案3，如果动画和速度是强制性的或者你有很多时间：

您可以尝试使用另一个 table 库或构建您自己的库。

teradata-covalent 数据 Table 滚动和页面上的重新渲染数据运行缓慢 angular 2+

teradata-covalent Data Table rerender data on scroll and page works slowly angular 2+

angular

teradata-covalent