Использование виртуального свитка в угловом материале 2 Таблица с @угловым /cdk-экспериментальным

У меня в таблице отображается так много строк, я хочу оптимизировать ее производительность. Я нашел решение с помощью технологии Virtual Scroll. Вот пример компонента углового материала 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>

Тем не менее, я хочу интегрировать его с таблицей углового материала, как показано ниже.

<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"

ОТВЕТЫ

Ответ 1

Это не то, что в настоящее время существует из коробки. Компонент CdkTable (или MatTable) не поддерживает виртуальную прокрутку YET.

Поддержка виртуального прокрутки, запеченная в @angular/cdk, все еще находится на этом этапе эксперимента - это изменится в версии 7.

Однако, когда эта функция приземляется, следующий шаг будет реализован для таблицы... и я объясню, почему.

cdk-virtual-scroll-viewport является контейнером для директивы *cdkVirtualFor, если мы рассмотрим эту директиву (CdkVirtualForOf), мы можем видеть, что

1) Он реализует CollectionViewer (код) 2) Он принимает (работает с) экземпляр DataSource (код)

Имея это в виду, давайте посмотрим на CdkTable

1) Он реализует CollectionViewer (код) 2) Он принимает (работает с) экземпляр DataSource (код)

Сходство не случайно, таблица (с некоторыми настройками) может использоваться cdk-virtual-scroll-viewport как используется cdkVirtualFor.

Я не уверен, какова будет окончательная реализация, сможет ли разработчик обернуть таблицу извне или таблица установит ее внутренне, но это направление будет.

Если бы я должен был догадаться, я бы сказал, что разработчик выберет, хочет ли он обернуть таблицу виртуальным прокруткой. Это связано с тем, что cdk-virtual-scroll-viewport не запрашивает cdkVirtualFor (через ViewChild), он является пассивным и ждет чего-то, чтобы его прикрепить... что является признаком того, что это считалось пред-ручным...

Вы можете сделать это прямо сейчас, расширив CdkTable и внеся корректировки самостоятельно, это потребует понимания внутренних элементов таблицы и может занять некоторое время. Я предлагаю немного подождать.