web-dev-qa-db-ja.com

仮想スクロールの使用Angular Material 2 Table with @ angular / cdk-experimental

テーブルに非常に多くの行が表示されるので、パフォーマンスを最適化したいです。仮想スクロール技術を使用して解決策を見つけました。 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"
angulartypescriptangular-material2angular6angular-cdk
18
Seanghay

まだサポートされていません。しかし、一部の人々はいくつかのPOCをやろうとしました。 https://github.com/angular/material2/issues/10122#issuecomment-440442656 。

また、これには issue 仮想スクロールと、上記のPOCの仕組みについての議論があります。

2
piyush gupta

これは現在すぐに使用できるものではありません。 CdkTable（またはMatTable）コンポーネントは仮想スクロールをサポートしていません[〜＃〜] yet [〜＃〜]。

@angular/cdkに組み込まれた仮想スクロールのサポートはまだ実験段階です。これはバージョン7で変更されます。

ただし、この機能が実装されたら、次のステップはテーブルに実装することです...そしてその理由を説明します。

cdk-virtual-scroll-viewportは*cdkVirtualForディレクティブのコンテナです。このディレクティブ（CdkVirtualForOf）を調べると、

1）ItimplementsCollectionViewer（ code ）2）DataSourceインスタンス（ code ）

これを念頭に置いて、CdkTableを見てみましょう。

1）ItimplementsCollectionViewer（ code ）2）DataSourceインスタンス（ code ）

類似性は偶然ではなく、cdkVirtualForが使用されているように、cdk-virtual-scroll-viewportがテーブルを（いくつかの調整を加えて）使用できます。

開発者が外部からテーブルをラップできるか、テーブルが内部で設定するかどうか、最終的な実装がどうなるかはわかりませんが、これはそうなる方向です。

推測しなければならなかった場合、開発者は仮想スクロールでテーブルをラップするかどうかを選択すると言います。これは、cdk-virtual-scroll-viewportがcdkVirtualForを（ViewChildを介して）クエリしないため、受動的で、何かがアタッチされるのを待つためです。事前に...

すぐにそれを行うことができます。CdkTableを拡張して自分で調整を行うには、テーブルの内部を理解する必要があり、時間がかかる場合があります。少し待つことをお勧めします。

5
Shlomi Assaf