在具有@ angular/cdk-experimental的Angular Material 2表中使用虚拟滚动 [英] Using Virtual Scroll in Angular Material 2 Table with @angular/cdk-experimental

问题描述

我有一个表显示了很多行，我想优化它的性能.我已经找到了使用虚拟滚动技术的解决方案.这是 Angular Material CDK Vritual Scroll Viewport Component 已经找到一个简单的 div :

I have a table displays so many rows, I want to optimize the performance of it. I've found a solution by using Virtual Scroll technique. Here is an example of Angular Material CDK Vritual Scroll Viewport Component with a simple div I've found:

<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 集成，如下所示

However, I want to integrate it with Angular Material Table like below

<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列以上，并且在加载和滚动时性能非常慢.

I was wondering how to wrap that cdk-virtual-scroll-viewport to mat-table. My table displays up to 1000 rows and more than 20 columns, and the performance is pretty slow while it's loading and scrolling.

PS:我知道可以使用 Paginator 来解决，但我不想这么做.

PS: I know that it can be solved by using Paginator, but I don't want to do that.

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"

推荐答案

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

It's not supported yet. But some people have tried to do some POC's. Here is one https://github.com/angular/material2/issues/10122#issuecomment-440442656 .

在此问题中，还有关于虚拟滚动以及上述POC如何进行的讨论有效.

Also in this issue there is discussion about virtual scrolling and how the above POC works.

这篇关于在具有@ angular/cdk-experimental的Angular Material 2表中使用虚拟滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！