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