Estoy usando la tabla de Angular 8 (sin usar flex) con las primeras 2 columnas como pegajosas.

Problema :

  1. El problema principal es el espacio entre la primera y la segunda columna que conduce a otros problemas.
  2. Cuando hago un desplazamiento horizontal, los datos de desplazamiento son visibles en el espacio entre esas columnas
  3. Hay una propiedad css que se establece en 159px. ¿Cómo se calcula esto?

Reproduciendo el problema.

Use el ejemplo de tabla de Angular con columnas adhesivas. https://stackblitz.com/angular/ lynkxvonedv? file = src% 2Fapp% 2Ftable-sticky-columns-example.html

  1. Agregar adhesivo a la segunda columna (posición)
  2. Agregue un texto largo a cualquier columna no adhesiva. (Lo he usado para la columna Peso).

ScreenShot

Gracias por adelantado.

3
josiebhai 30 oct. 2019 a las 09:20

2 respuestas

La mejor respuesta

Encontré una solución que puede ayudarte.

constructor(private ngZone: NgZone) {}
ngAfterViewInit() {
this.ngZone.onMicrotaskEmpty.pipe(take(3)).subscribe(() => this.table.updateStickyColumnStyles());
}

Enlace de GitHub: https://github.com/angular/components/issues/15885

3
Paul Richard 30 oct. 2019 a las 07:44

Para mí, la tabla de tapetes estaba dentro de una condición * ngIf, así que tengo que hacer algo como a continuación.

@ViewChild('matTable', { static: false }) set table(matTable: MatTable<any>) {
    if (matTable) {
      this.ngZone.onMicrotaskEmpty
        .pipe(take(3))
        .subscribe(() => matTable.updateStickyColumnStyles())
    }
  }
0
rrr 15 jul. 2020 a las 16:33