Boa tarde, estou implementando o Paginator na minha tabela, mas ele simplesmente não funciona, ele aparece na tabela, eu seleciono a quantidade de itens por páginas e não acontece nada. Segue o codigo:
veiculo.component.ts:
@Component({
selector: 'app-veiculo',
templateUrl: './veiculo.component.html',
styleUrls: ['./veiculo.component.css'],
})
export class VeiculoComponent implements OnInit {
public veiculos: Veiculos[] = [];
displayedColumns = [
'placaOriginal',
'placaFria',
'modelo',
'marca',
'ano',
'acoes',
];
dataSource = new MatTableDataSource(
(this.veiculos = this.veiculoService.list())
);
addVeiculo(): void {
const dialogRef = this.dialog.open(VeiculoDialogComponent, {
width: '500px',
});
dialogRef.afterClosed().subscribe((result) => {});
}
@ViewChild(MatPaginator) paginator!: MatPaginator;
constructor(
private veiculoService: VeiculoService,
public dialog: MatDialog
) {}
ngOnInit(): void {
this.dataSource.paginator = this.paginator;
}
veiculo.component.html:
<mat-card>
<mat-toolbar style="background-color: #2596be;" color="primary">Veiculos
<button mat-raised-button (click)="addVeiculo()">
<span class="material-icons">
add
</span>
Veiculo
</button>
</mat-toolbar>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="placaOriginal">
<th mat-header-cell *matHeaderCellDef>Placa Original</th>
<td mat-cell *matCellDef="let veiculo">{{ veiculo.placaOriginal }}</td>
</ng-container>
<ng-container matColumnDef="placaFria">
<th mat-header-cell *matHeaderCellDef>Placa Fria</th>
<td mat-cell *matCellDef="let veiculo">{{ veiculo.placaFria }}</td>
</ng-container>
<!-- <ng-container matColumnDef="renavam">
<th mat-header-cell *matHeaderCellDef>Renavam</th>
<td mat-cell *matCellDef="let veiculo">{{ veiculo.renavam }}</td>
</ng-container>
<ng-container matColumnDef="chassi">
<th mat-header-cell *matHeaderCellDef>Chassi</th>
<td mat-cell *matCellDef="let veiculo">{{ veiculo.chassi }}</td>
</ng-container>
<ng-container matColumnDef="chassiFalso">
<th mat-header-cell *matHeaderCellDef>Chassi Falso</th>
<td mat-cell *matCellDef="let veiculo">{{ veiculo.chassiFalso }}</td>
</ng-container>
<ng-container matColumnDef="numeroMotor">
<th mat-header-cell *matHeaderCellDef>Numero Motor</th>
<td mat-cell *matCellDef="let veiculo">{{ veiculo.numeroMotor }}</td>
</ng-container>
<ng-container matColumnDef="numeroMotorFalso">
<th mat-header-cell *matHeaderCellDef>Numero Motor Falso</th>
<td mat-cell *matCellDef="let veiculo">{{ veiculo.numeroMotorFalso }}</td>
</ng-container> -->
<ng-container matColumnDef="modelo">
<th mat-header-cell *matHeaderCellDef>Modelo</th>
<td mat-cell *matCellDef="let veiculo">{{ veiculo.modelo }}</td>
</ng-container>
<ng-container matColumnDef="marca">
<th mat-header-cell *matHeaderCellDef>Marca</th>
<td mat-cell *matCellDef="let veiculo">{{ veiculo.marca }}</td>
</ng-container>
<ng-container matColumnDef="ano">
<th mat-header-cell *matHeaderCellDef>Ano</th>
<td mat-cell *matCellDef="let veiculo">{{ veiculo.ano }}</td>
</ng-container>
<!-- <ng-container matColumnDef="numeroProcesso">
<th mat-header-cell *matHeaderCellDef>Numero Processo</th>
<td mat-cell *matCellDef="let veiculo">{{ veiculo.numeroProcesso }}</td>
</ng-container>
<ng-container matColumnDef="tipoProcesso">
<th mat-header-cell *matHeaderCellDef>Tipo Processo</th>
<td mat-cell *matCellDef="let veiculo">{{ veiculo.tipoProcesso }}</td>
</ng-container>
<ng-container matColumnDef="classificacao">
<th mat-header-cell *matHeaderCellDef>Classificação</th>
<td mat-cell *matCellDef="let veiculo">{{ veiculo.classificacao }}</td>
</ng-container>
<ng-container matColumnDef="tipoJustica">
<th mat-header-cell *matHeaderCellDef>Tipo Justica</th>
<td mat-cell *matCellDef="let veiculo">{{ veiculo.tipoJustica }}</td>
</ng-container> -->
<ng-container matColumnDef="acoes">
<th mat-header-cell *matHeaderCellDef>Ações</th>
<td mat-cell *matCellDef="let veiculo">
<button mat-icon-button class="btn-primary">
<mat-icon><span class="material-icons">edit</span></mat-icon>
</button>
<button mat-icon-button class="btn-danger">
<mat-icon><span class="material-icons">delete</span></mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator [pageSizeOptions]="[3, 5, 10]">
</mat-paginator>
</div>
</mat-card>