I am making 3 tables in a component component, but it does not make the same structure since they share the same fields and I generated it like this:
in the 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>
in the 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);
} );
}
}
To be able to send the information I did it in the following way:
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 }
);
and in the html I did it as follows:
<app-tabla [data]='this.datosEmbarques'> </app-tabla>
<app-tabla [data]='this.datosCalidad'> </app-tabla>
<app-tabla [data]='this.datosTesFin'> </app-tabla>
To which if you capture the information, the tables are generated, but the paging is not recognizing any length, that's why I printed it in the console and it appears as undefined, so do the following:
@ViewChild(MatPaginator, { read: true, static: false }) paginator: MatPaginator;
@ViewChild(MatSort, { read: true, static: false }) sort: MatSort;
But even so, it continues to mark undefined and pagination does not work
I see two main problems in your code:
The first is that
@ViewChild
you have added an option inread: true
the , which is preventing the decorator from getting the correct reference to the elements. Therefore you have to remove this option and since the default value ofstatic
isfalse
, you can simplify that part of the code as follows:If you want to know more about how it works
@ViewChild
you can watch this videoAnd the second potential flaw I see, is that you're creating different
MatTableDataSource
You're first creating one in
ngAfterViewInit
, in which you do assign the reference topaginator
andsort
.And subsequently you are creating a new one
MatTableDataSource
every time the input changesdata
. In this one, unlike the one inngAfterViewInit
you are not assigning the references, so neither the paginator nor the sorter would be linked.To resolve this possible issue, you can modify your code as follows:
a greeting
Thank you very much, I solved it like this in the component table.component.ts
What I understood reading in forums is the same as the video you shared with me, and only in this way I solved the part that called them in another component as I had put it from the beginning.