angular - 使用@angular/cdk-experimental 在 Angular Material 2 表中使用虚拟滚动

Question

我有一个表显示了很多行，我想优化它的性能。我通过使用虚拟滚动技术找到了解决方案。这是 Angular Material CDK Vritual Scroll Viewport Component 的示例使用一个简单的 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"

Answer 1

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

内置虚拟滚动支持 @angular/cdk仍处于试验阶段 - 这将在版本 7 中改变。

但是，当此功能落地时，下一步将是为表格实现它。我会解释原因。

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

1. 它实现 CollectionViewer ( code )

2. 它接受(与)DataSource实例 ( code )

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

1. 它实现 CollectionViewer ( code )

2. 它接受(与)DataSource实例 ( code )

相似性不是偶然的，表格(经过一些调整)可以被cdk-virtual-scroll-viewport使用喜欢 cdkVirtualFor被使用。

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

如果非要我猜的话，我会说开发人员会选择是否要用虚拟卷轴包裹 table 。这是因为 cdk-virtual-scroll-viewport不查询 cdkVirtualFor (通过 ViewChild )，它是被动的并等待附加它的东西。这表明这是事先想到的。

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