Pregunta Uso del desplazamiento virtual en la tabla de material angular 2 con @ angular / cdk-experimental


Tengo una tabla que muestra tantas filas, quiero optimizar el rendimiento de la misma. Encontré una solución usando la técnica de desplazamiento virtual. Aquí hay un ejemplo de Material angular CDK Vritual Scroll Viewport Component con un simple div He encontrado:

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

Sin embargo, quiero integrarlo con Tabla de material angular como abajo

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

Me preguntaba cómo envolverlo cdk-virtual-scroll-viewport a mat-table. Mi tabla muestra hasta 1000 filas y más de 20 columnas, y el rendimiento es bastante lento mientras se carga y se desplaza.

PD: sé que se puede resolver usando Paginator, pero no quiero hacer eso.

Versiones

  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"

8
2018-06-05 02:46


origen


Respuestas:


Esto no es algo que actualmente existe fuera de la caja. los CdkTable (o MatTable) componente no es compatible con desplazamiento virtual TODAVÍA.

El soporte de desplazamiento virtual al horno en @angular/cdk todavía está en su fase experimental; esto cambiará en la versión 7.

Sin embargo, cuando llegue esta característica, el siguiente paso será implementarla en la tabla ... y explicaré por qué.

cdk-virtual-scroll-viewport es un contenedor para el *cdkVirtualFor directiva, si miramos esta directiva (CdkVirtualForOf) Podemos ver eso

1) Es implementos  CollectionViewer (código)   2) Acepta (trabaja con) DataSource instancia (código)

Con esto en mente, veamos el CdkTable

1) Es implementos  CollectionViewer (código)   2) Acepta (trabaja con) DataSource instancia (código)

La similitud no es casual, la tabla (con algunos ajustes) puede ser utilizada por cdk-virtual-scroll-viewport como el cdkVirtualFor es usado.

No estoy seguro de cuál será la implementación final, si el desarrollador será capaz de envolver la mesa desde el exterior o la mesa lo establecerá internamente, pero esta es la dirección que será.

Si tuviera que adivinar, diría que el desarrollador elegirá si quiere envolver la mesa con un desplazamiento virtual. Esto es porque cdk-virtual-scroll-viewport no consulta por cdkVirtualFor (vía ViewChild), es pasivo y espera que algo lo adhiera ... lo cual es una señal de que esto se pensó antes de la mano ...

Puedes hacerlo ahora, extendiendo CdkTable y hacer los ajustes usted mismo, esto requerirá una comprensión de las partes internas de la mesa y podría tomar algún tiempo. Sugiero esperar un poco.


1
2017-09-20 17:32