25

我有一个表显示这么多行，我想优化它的性能。我通过使用虚拟滚动技术找到了解决方案。这是Angular Material CDK Vritual Scroll Viewport 组件的示例，其中包含一个简单的div我发现：

<cdk-virtual-scroll-viewport class="list-container lg" [itemSize]="52.5">
  <div *cdkVirtualFor="let state of statesObservable | async;" class="list-group-item">
     <div class="state">{{state.name}}</div>
     <div class="capital">{{state.capital}}</div>
  </div>
</cdk-virtual-scroll-viewport>

但是，我想将它与下面的Angular Material Table集成

<table mat-table [dataSource]="dataSource">
    <ng-container  *ngFor="let c of displayedColumns" [matColumnDef]="c">
      <th mat-header-cell *matHeaderCellDef>{{getTitle(c)}}</th>
      <td mat-cell style="white-space: pre-wrap;" *matCellDef="let element"> {{element[c]}}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>

我想知道如何将其包装cdk-virtual-scroll-viewport到mat-table. 我的表最多显示 1000 行和 20 多列，并且在加载和滚动时性能非常慢。

PS：我知道可以通过使用Paginator来解决，但我不想那样做。

版本

  1. "@angular/material": "^6.2.0"
  2. @angular/cdk": "^6.2.0"
  3. @angular/cdk-experimental": "^6.2.1"
  4. "@angular/core": "6.0.3"
  5. "@angular/cli": "6.0.7"
4

3 回答 3

8

这不是目前开箱即用的东西。（CdkTable或MatTable）组件不支持虚拟滚动YET。

嵌入的虚拟滚动支持@angular/cdk仍处于实验阶段 - 这将在版本 7 中更改。

然而，当这个特性落地时，下一步将是为表实现它。我会解释为什么。

cdk-virtual-scroll-viewport是指令的容器*cdkVirtualFor，如果我们查看这个指令 ( CdkVirtualForOf) 我们可以看到

  1. 它实现 CollectionViewer（代码）

  2. 它接受（使用）DataSource实例（代码）

考虑到这一点，让我们看看CdkTable

  1. 它实现 CollectionViewer（代码）

  2. 它接受（使用）DataSource实例（代码）

相似性不是偶然的，表格（经过一些调整）可以通过cdk-virtual-scroll-viewportlike the cdkVirtualForis used来使用。

我不确定最终的实现是什么，开发人员是否能够从外部包装表格，或者表格将在内部设置它，但这是它的方向。

如果我不得不猜测，我会说开发人员会选择是否要用虚拟卷轴包裹桌子。这是因为cdk-virtual-scroll-viewport不查询cdkVirtualFor(via ViewChild)，它是被动的并等待附加它的东西。这表明这是预先考虑的。

您现在可以通过CdkTable自己扩展和进行调整来完成，这将需要了解表的内部结构并且可能需要一些时间。我建议稍等。

于 2018-09-20T17:32:19.407 回答
2

我做了一个自定义指令，什么可以解决这个问题：

1）安装一个包：$ npm install -save ng-table-virtual-scroll并将其添加到导入：

import { TableVirtualScrollModule } from 'ng-table-virtual-scroll';

@NgModule({
  imports: [
    // ...
    TableVirtualScrollModule
  ]
})
export class AppModule { }

2）使用DataSource包中的自定义：

import { TableVirtualScrollDataSource } from 'ng-table-virtual-scroll';

@Component({...})
export class MyComponent {

  dataSource = new TableVirtualScrollDataSource();

}

3）在视口容器上使用指令：

<cdk-virtual-scroll-viewport tvsItemSize style="height: 400px;">
    <table mat-table [dataSource]="dataSource">
    ...
    </table>
</cdk-virtual-scroll-viewport>

该指令允许您使用 的所有功能mat-table，例如排序、分页、粘性标题/列等

于 2019-11-18T10:10:32.823 回答
2

尚不支持。但是有些人试图做一些POC。这是一个https://github.com/angular/material2/issues/10122#issuecomment-440442656。

在这个问题中，还有关于虚拟滚动以及上述 POC 如何工作的讨论。

于 2019-01-10T09:40:29.243 回答