Mam stół wyświetla tak wiele wierszy, chcę zoptymalizować wydajność. Znalazłem rozwiązanie za pomocą techniki wirtualnej przewijania. Oto przykład Materiał kątowy CDK Vrital Scroll Component Z prostym div Znalazłem:

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

Chcę jednak zintegrować go z Stół z materiału kątowego jak poniżej

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

Zastanawiałem się, jak owinąć, aby cdk-virtual-scroll-viewport do mat-table. Mój stół wyświetla do 1000 wierszy i więcej niż 20 kolumn, a wydajność jest dość powolny, gdy jest ładowanie i przewijanie.

PS: Wiem, że można go rozwiązać za pomocą paginator, ale ja nie Chcesz to zrobić.

Wersje

  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"
21
Seanghay 5 czerwiec 2018, 05:46

3 odpowiedzi

Najlepsza odpowiedź

Nie jest jeszcze obsługiwany. Ale niektórzy ludzie próbowali zrobić trochę POC. Oto jedna https://github.com/Angular/Material2/issues/10122 # emituecomment-440442656.

Również w tym Wydanie Istnieje dyskusja na temat przewijania wirtualnego i jak działa powyżej Poc.

2
piyush gupta 10 styczeń 2019, 09:40

To nie jest coś, co obecnie istnieje z pudełka. Komponent CdkTable (lub {X1}} nie obsługuje przewijania wirtualnego jeszcze .

Wirtualna obsługa przewijania pieczona do @angular/cdk jest nadal w fazie eksperymentalnej - to zmieni w wersji 7.

Jednak gdy ta funkcja ma kolejnym krokiem będzie wdrożenie na stole ... i wyjaśnię dlaczego.

cdk-virtual-scroll-viewport to kontener do dyrektywy *cdkVirtualFor, jeśli zajrzymujemy się niniejszą dyrektywą (CdkVirtualForOf) Widzimy to

1) IT implementuje CollectionViewer (Kod) 2) akceptuje (współpracuje z) DataSource instancja (Kod)

Mając na uwadze, spójrzmy na CdkTable

1) IT implementuje CollectionViewer (Kod) 2) Przyjmuje (współpracuje z) DataSource instancja (Kod)

Podobieństwo nie jest przypadkowo, tabela (z pewnymi regulacjami) może być używana przez cdk-virtual-scroll-viewport, jak używany jest cdkVirtualFor.

Nie jestem pewien, co nastąpi ostatnia implementacja, czy deweloper będzie w stanie owinąć tabelę z zewnątrz lub tabelę ustawić go wewnętrznie, ale jest to kierunek, w którym będzie.

Gdybym musiał zgadnąć, powiedziałbym, że dev wybierze, czy chce owinąć stół wirtualnym przewijaniem. Jest to dlatego, że cdk-virtual-scroll-viewport nie ma zapytania dla cdkVirtualFor (przez ViewChild), jest bierny i czeka na coś do załączenia ... co jest znakiem, że był to myśl o pre- dłoń...

Możesz to zrobić teraz, rozszerzając CdkTable i dokonywanie dostosowań, będzie to wymagało zrozumienia internałów stołowych i może zająć trochę czasu. Proponuję czekać trochę.

6
Shlomi Assaf 20 wrzesień 2018, 17:32

Zrobiłem niestandardową dyrektywę, co może rozwiązać ten problem:

1) Zainstaluj pakiet: $ npm install -save ng-table-virtual-scroll i dodaj go do importu:

import { TableVirtualScrollModule } from 'ng-table-virtual-scroll';

@NgModule({
  imports: [
    // ...
    TableVirtualScrollModule
  ]
})
export class AppModule { }

2) Użyj niestandardowego DataSource z pakietu:

import { TableVirtualScrollDataSource } from 'ng-table-virtual-scroll';

@Component({...})
export class MyComponent {

  dataSource = new TableVirtualScrollDataSource();

}

3) Użyj dyrektywy w sprawie kontenera rzutni:

<cdk-virtual-scroll-viewport tvsItemSize style="height: 400px;">
    <table mat-table [dataSource]="dataSource">
    ...
    </table>
</cdk-virtual-scroll-viewport>

Dyrektywa umożliwia korzystanie z wszystkich funkcji mat-table, takich jak sortowanie, paginacja, lepki nagłówek / kolumna itp

2
Dulaj Kulathunga 18 listopad 2019, 12:08