angular - cdkVirtualScroll と cdkTable を組み合わせるには?

Question

固定ヘッダーを使用して動作する仮想スクロール テーブルを探しているので、素晴らしい Cdk を見つけましたが、ドキュメントを理解するのは非常に困難です。現在、 と を組み合わせようとしてCdkTableいCdkVirtualScollます。

私が見つけたすべての実例はマテリアルテーブルを使用していますが、私は使用していません。

では、どうすれば仕事に就くことができるCdkVirtualScollでしょうか？これが私がこれまでに行ったことです（例から）：

<cdk-virtual-scroll-viewport>
<cdk-table [dataSource]="dataSource">
    <ng-container cdkColumnDef="username">
        <cdk-header-cell *cdkHeaderCellDef> User name </cdk-header-cell>
        <cdk-cell *cdkCellDef="let row"> {{row.username}} </cdk-cell>
    </ng-container>

    <ng-container cdkColumnDef="title">
        <cdk-header-cell *cdkHeaderCellDef> Title </cdk-header-cell>
        <cdk-cell *cdkCellDef="let row"> {{row.title}} </cdk-cell>
    </ng-container>

    <!-- Header and Row Declarations -->
    <cdk-header-row *cdkHeaderRowDef="['username', 'age']"></cdk-header-row>
    <cdk-row *cdkRowDef="let row; columns: ['username', 'age']"></cdk-row>
</cdk-table>
</cdk-virtual-scroll-viewport>

ドキュメントに書かれているように、テーブルはスクロール ビューポートにラップされました。しかし、今をどこでどのように設定でき*cdkVirtualForますか?

助けてくれてありがとう！