0

Estoy realizando 3 tablas en un componente componente, pero para no realiza la misma estructura ya que comparten los mismos campos y la genere asi:

En el html

<mat-table #table [dataSource]="dataSource" matSort matSortDisableClear matSortDirection="asc" >

  <ng-container matColumnDef="Auth_Area">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Auth_Area </mat-header-cell>
    <mat-cell *matCellDef="let row">
      {{row.Auth_Area}}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Comentarios">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Comentarios </mat-header-cell>
    <mat-cell *matCellDef="let row">
      {{row.Comentarios}}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Fecha">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Fecha </mat-header-cell>
    <mat-cell *matCellDef="let row">
      {{row.Fecha}}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="NumTrabajador">
    <mat-header-cell *matHeaderCellDef mat-sort-header>NumTrabajador </mat-header-cell>
    <mat-cell *matCellDef="let row">
      {{row.NumTrabajador}}
    </mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"> </mat-row>

</mat-table>

<mat-paginator #paginator
               [length]="this.dataSource.data ? this.dataSource.data.legth : 0"
               [pageSize]="5"
               [pageSizeOptions]="[5, 10, 25, 100]"
               [showFirstLastButtons]="true"
               (page)="onPageChange($event)"
               >
</mat-paginator>

En el ts

import { ChangeDetectionStrategy, Component, Input, OnInit, SimpleChanges, ViewChild} from '@angular/core';
import { MatPaginator, MatTableDataSource, MatSort, MatDialog } from '@angular/material';

@Component({
  selector: 'app-tabla',
  templateUrl: './tabla.component.html',
  styleUrls: ['./tabla.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TablaComponent implements OnInit {

  @ViewChild(MatPaginator, { read: true, static: false }) paginator: MatPaginator;
  @ViewChild(MatSort, { read: true, static: false }) sort: MatSort;
  @Input() data: any[];
  public displayedColumns = ['Auth_Area', 'Comentarios', 'Fecha', 'NumTrabajador'];
  public dataSource: MatTableDataSource<any>;
  
  constructor() { }

  ngOnInit() {
    
  }

  public ngOnChanges(changes: SimpleChanges) {
    console.log(changes.data.currentValue)
    this.dataSource = new MatTableDataSource(changes.data.currentValue);
  }

  ngAfterViewInit() {
    setTimeout(() => {
      this.dataSource = new MatTableDataSource([this.data]);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      console.log(this.paginator);
      console.log(this.sort);
    } );
  }
}

Para poder mandar la información lo hice de la siguiente manera:

this.PTService.RegistrosOACalidad(this.OTBusqueda).subscribe(
      data => { this.datosCalidad = data}
    );

    this.PTService.RegistrosOATesFin(this.OTBusqueda).subscribe(
      data => { this.datosTesFin = data }
    );

    this.PTService.RegistrosOAEmbarques(this.OTBusqueda).subscribe(
      data => { this.datosEmbarques = data }
    );

y en el html lo hice de la siguiente manera:

<app-tabla [data]='this.datosEmbarques'> </app-tabla>

<app-tabla [data]='this.datosCalidad'> </app-tabla>

<app-tabla [data]='this.datosTesFin'> </app-tabla>

A lo cual si plasma la información, se generan las tablas, pero el paginado no esta reconociendo ninguna longitud, por eso lo imprimí en consola y aparece como indefinido, por eso realice lo siguiente:

@ViewChild(MatPaginator, { read: true, static: false }) paginator: MatPaginator;
@ViewChild(MatSort, { read: true, static: false }) sort: MatSort;

Pero aun así sigue marcando indefinido y no funciona el paginado

2 respuestas 2

1

Veo dos problemas principales en tu código:

El primero es que en los @ViewChild has añadido una opción read: true, la cual está impidiendo que el decorador obtenga la referencia correcta a los elementos. Por tanto tienes que eliminar dicha opción y dado que el valor por defecto de static es false, puedes simplificar esa parte del código de la siguiente manera:

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

Si quieres saber más de cómo funciona @ViewChild puedes ver este video


Y el segundo fallo potencial que veo, es que estás creando diferentes MatTableDataSource

  • Primero estás creando uno en ngAfterViewInit, en el que sí asignas la referencia al paginator y al sort.

  • Y posteriormente estás creando un nuevo MatTableDataSource cada vez que cambie el input data. En este, a diferencia del de ngAfterViewInit no estás asignando las referencias, por lo que no se vincularían ni el paginator ni el sorter.

Para resolver este posible problema, puedes modificar tu código de la siguiente manera:

export class TablaComponent implements OnInit {

  ...

  //creamos un único dataSource
  public dataSource = new MatTableDataSource<any>();
  
  // covertimos el input data en un setter para que cada vez que cambie el 
  // input asignar el nuevo valor al data del dataSource
  @Input() set data(newData: any[]) {
    this.dataSource.data = newData;
  }

  ...
  
  // eliminamos ngOnChanges ya que no es necesario con el setter.
  

  //asignamos el paginator y el sort al datasource una vez la vista este inicializada.
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort; 
  }
}

un saludo

0
0

Muchas gracias, lo solucione así en el componente tabla.component.ts

@ViewChild(MatSort, { static: true }) set matSort(ms: MatSort) {
    this.sort = ms;
  }
  @ViewChild(MatPaginator, { static: true }) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
  }


public ngOnChanges(changes: SimpleChanges) {
    this.dataSource = new MatTableDataSource(changes.data.currentValue);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;    
  }

Lo que entendí leyendo en foros es lo mismo que el vídeo que me compartiste, y solamente así solucione la parte de que en otro componente llamarlas como lo había puesto desde el inicio.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.