Использование виртуальной прокрутки в Angular Material 2 Table с @ angular / cdk-экспериментальный - PullRequest
Новая
       38

Использование виртуальной прокрутки в Angular Material 2 Table с @ angular / cdk-экспериментальный

0 голосов
/ 05 июня 2018

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

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

Ответы [ 2 ]

0 голосов
/ 10 января 2019

Пока не поддерживается.Но некоторые люди пытались сделать некоторые POC.Вот один https://github.com/angular/material2/issues/10122#issuecomment-440442656.

Также в этом выпуске обсуждается виртуальная прокрутка и как работает вышеуказанный POC.

0 голосов
/ 20 сентября 2018

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

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

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

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

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

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

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

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

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

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

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

...