Tenho duas telas de consulta onde carrego os dados em um materialtable com angular e uso o pagination, porém, somente um está funcionando corretamente, aparentemente, o paginator está sempre carregando o último. Preciso fazer com que funciona para as duas tabelas. HTML tabela 1:
<mat-table [dataSource]="dataSourceCfg" matSort>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
<td mat-cell *matCellDef="let cfg">{{cfg.id}}</td>
</ng-container>
<ng-container matColumnDef="planta">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Planta</th>
<td mat-cell *matCellDef="let cfg">{{cfg.planta}}</td>
</ng-container>
<ng-container matColumnDef="linha">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Linha</th>
<td mat-cell *matCellDef="let cfg">{{cfg.linha}}</td>
</ng-container>
<ng-container matColumnDef="plantaReduzida">
<th mat-header-cell *matHeaderCellDef mat-sort-header>P.reduzida</th>
<td mat-cell *matCellDef="let cfg">{{cfg.plantaReduzida}}</td>
</ng-container>
<ng-container matColumnDef="opcoes">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Opções</th>
<td mat-cell *matCellDef="let cfg">
<button mat-raised-button color="primary" tooltip="Selectionar" (click)="dadosSelecionadoConf(cfg)"><mat-icon>create</mat-icon></button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsCFG"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsCFG;"></tr>
</mat-table>
<mat-paginator [pageSize]="5" [pageSizeOptions]="[5]" [showFirstLastButtons]="true"></mat-paginator>
HTML tabela 2
<mat-table [dataSource]="dataSourceABV">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>Id</th>
<td mat-cell *matCellDef="let abv">{{abv.id}}</td>
</ng-container>
<ng-container matColumnDef="pProdMes">
<th mat-header-cell *matHeaderCellDef>P.ProdMes</th>
<td mat-cell *matCellDef="let abv">{{abv.pProdMes}}</td>
</ng-container>
<ng-container matColumnDef="nomPlaniControl">
<th mat-header-cell *matHeaderCellDef>N. Planilha Control</th>
<td mat-cell *matCellDef="let abv">{{abv.nomPlaniControl}}</td>
</ng-container>
<ng-container matColumnDef="codItemPlanilha">
<th mat-header-cell *matHeaderCellDef>Cod. Item planilha</th>
<td mat-cell *matCellDef="let abv">{{abv.codItemPlanilha}}</td>
</ng-container>
<ng-container matColumnDef="nomeItemControle">
<th mat-header-cell *matHeaderCellDef>Nome Item Controle</th>
<td mat-cell *matCellDef="let abv">{{abv.nomeItemControle}}</td>
</ng-container>
<ng-container matColumnDef="opcoes">
<th mat-header-cell *matHeaderCellDef>Opções</th>
<td mat-cell *matCellDef="let abv">
<button mat-raised-button color="primary" tooltip="Selectionar" (click)="dadosSelecionadoAbv(abv)"><mat-icon>create</mat-icon></button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsABV"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsABV;"></tr>
</mat-table>
<mat-paginator [pageSize]="5" [pageSizeOptions]="[5]" [showFirstLastButtons]="true"></mat-paginator>
e no typescript:
@ViewChild(MatPaginator, {static: true}) paginatorABV: MatPaginator;
@ViewChild(MatPaginator, {static: true}) paginatorCFG: MatPaginator;
constructor(
private fb: FormBuilder,
private toastr: ToastrService,
private router: ActivatedRoute,
private dialog: MatDialog,
private snackBar: MatSnackBar,
private route: Router,
private configuracaoService: ConfiguracoesService,
private ambevService: AmbevsService,
private plcService: PLCService,
private tvService: TVariaveisService,
private umService: UMsService,
private historianService: HistoriansService
) {
this.route = route;
this.getConfiguracao();
this.getAmbev();
this.getPLC();
}
getAmbev() {
this.ambevService.getAllAmbev().subscribe(
(_ambevs: Ambev[]) => {
this.ambevs = _ambevs;
this.ambevFiltrada = this.ambevs;
this.dataSourceABV = new MatTableDataSource(this.ambevs);
this.dataSourceABV.paginator = this.paginatorABV;
},
error => {
console.log(error);
}
);
}
getConfiguracao() {
this.configuracaoService.getAllConfiguracao().subscribe(
(_configuracoes: Configuracao[]) => {
this.configuracoes = _configuracoes;
this.configuracoesFiltradas = this.configuracoes;
this.dataSourceCfg = new MatTableDataSource(this.configuracoes);
this.dataSourceCfg.paginator = this.paginatorCFG;
},
error => {
console.log(error);
}
);
}
Ao executar somente uma tabela funciona o paginator.
Como posso corrigir isso?