@angular/cdk-experimental이 있는 Angular 재료 2 표에서 가상 스크롤 사용

@angular/cdk-experimental이 있는 Angular 재료 2 표에서 가상 스크롤 사용

테이블에 너무 많은 행이 표시되어 있으므로 테이블의 성능을 최적화하고 싶습니다.저는 가상 스크롤 기술을 사용하여 해결책을 찾았습니다.다음은 Angular Material CDK 가상 스크롤 뷰포트 구성 요소의 예입니다.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: 페이지네이터를 사용하면 해결될 수 있다는 것을 알지만, 그렇게 하고 싶지는 않습니다.

버전

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"

이것은 현재 즉시 사용할 수 있는 것이 아닙니다.그CdkTable(또는)MatTable) 구성 요소는 아직 가상 스크롤을 지원하지 않습니다.

가상 스크롤 지지대가 구워지는 위치@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직접 조정해야 하므로 테이블 내부에 대한 이해가 필요하고 시간이 걸릴 수 있습니다.조금 기다리시는 게 좋겠어요.

이 문제를 해결할 수 있는 맞춤형 지침을 만들었습니다.

패키지 설치: $ npm install -save ng-table-virtual-scroll가져오기에 추가합니다.

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

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

지정 관을니다합을 합니다.DataSource패키지에서:

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

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

  dataSource = new TableVirtualScrollDataSource();

}

뷰포트 컨테이너에서 지시문 사용:

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

하면 지을사용의모사있수다습의 모든 할 수 .mat-table header등, , 고글열/등정리 등

아직 지원되지 않습니다.하지만 몇몇 사람들은 POC를 하려고 노력했습니다.여기 https://github.com/angular/material2/issues/10122#issuecomment-440442656 이 있습니다.

또한 이번 호에서는 가상 스크롤과 위의 POC 작동 방식에 대해 논의합니다.

언급URL : https://stackoverflow.com/questions/50691281/using-virtual-scroll-in-angular-material-2-table-with-angular-cdk-experimental