0

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>

1 Resposta 1

0

Você precisa implementar o "AfterViewInit", no lugar do "OnInit", pois ele precisa ser chamado depois que o Angular inicializa a exibição.

ngAfterViewInit(){
    this.dataSource.paginator = this.paginator;
}

E se você tirar a função OnInit(), tem que mudar também a parte da implementação do componente:

export class VeiculoComponent implements AfterViewInit
1
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    29/04/2022 às 0:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .