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

Siéntete en la libertad de compartir nuestro sitio y códigos en tus redes, ayúdanos a aumentar esta comunidad.

Solución:

Esto no es algo que exista actualmente fuera de la caja. El CdkTable (o MatTable) el componente no es compatible con el desplazamiento virtual AÚN.

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

Sin embargo, cuando esta característica aterrice, el siguiente paso será implementarla para la mesa. Voy a explicar por qué.

cdk-virtual-scroll-viewport es un recipiente para el *cdkVirtualFor directiva, si nos fijamos en esta directiva (CdkVirtualForOf) Podemos ver eso

1. Eso implementosCollectionViewer (código)

2. Acepta (funciona con) DataSource instancia (código)

Con esto en mente, veamos el CdkTable

1. Eso implementosCollectionViewer (código)

2. Acepta (funciona 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 se usa

No estoy seguro de cuál será la implementación final, si el desarrollador podrá envolver la tabla desde el exterior o si la tabla la configurará internamente, pero esta es la dirección que tomará.

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

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

Todavía no es compatible. Pero algunas personas han intentado hacer algunos POC. Aquí hay uno https://github.com/angular/material2/issues/10122#issuecomment-440442656.

También en este número hay una discusión sobre el desplazamiento virtual y cómo funciona el POC anterior.

Hice una directiva personalizada, lo que puede resolver este problema:

1) instalar un paquete: $ npm install -save ng-table-virtual-scroll y añádelo a las importaciones:

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

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

2) usar la costumbre DataSource del paquete:

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

@Component(...)
export class MyComponent 

  dataSource = new TableVirtualScrollDataSource();

3) use la directiva en el contenedor de ventana gráfica:

    
    ...
    

La directiva le permite utilizar todas las características de mat-tablecomo clasificación, paginación, encabezado/columna fija, etc.

Sección de Reseñas y Valoraciones

---

---

Utiliza Nuestro Buscador