Angular material paginator don't work when I save a change on the code - Stack Overflow

admin管理员组

文章数量:1297256

When I start the project, the paginator works fine, but if I change something in the code, it stops working, and only work again if I 1)restart the project, 2) add a new item to my list. I've tried adding logs, but it looks like the paginator behavior doesn't change.

import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { DenunciaService } from '../../../services/denuncia.service';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { Denuncia } from '../../../interfaces/denuncia';
import { MatIconModule } from '@angular/material/icon';
import { MatButton, MatButtonModule } from '@angular/material/button';
import { Router } from '@angular/router';
import { CommonModule } from '@angular/common';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';



@Component({
  selector: 'lista-denuncia',
  imports: [CommonModule, MatFormFieldModule, MatInputModule, MatTableModule, MatIconModule, MatButtonModule, MatButton, MatPaginatorModule],
  templateUrl: './lista-denunciaponent.html',
  styleUrls: ['./lista-denunciaponent.css'],
})
export class ListaDenunciaComponent implements OnInit, AfterViewInit {

  denunciaData: Denuncia[] = [];

  constructor(private denunciaService: DenunciaService, private router: Router) { }
  
  displayedColumns: string[] = ['Relato', 'Status','Data', 'Acoes'];
  dataSource = new MatTableDataSource<Denuncia>(([]));
  @ViewChild(MatPaginator) paginator!: MatPaginator;

  ngOnInit(): void {
     this.getDenuncia();

  }

  ngAfterViewInit() {

    this.dataSource.paginator = this.paginator;
  }

  getDenuncia(): void {
    this.denunciaService.getDenuncia().subscribe({
      next: (data: Denuncia[]) => {
        this.denunciaData = data.map(denuncia => ({
          ...denuncia,
          dataEmissao: new Date(denuncia.dataEmissao),
        }));
        this.dataSource.data = this.denunciaData;
      },
      error: err => console.error('Error fetching data:', err),
    });
  }


  deleteDenuncia(id: number): void {
    this.denunciaService.deleteDenuncia(id).subscribe({
      next: () => {
        this.dataSource.data = this.dataSource.data.filter(denuncia => denuncia.id !== id);
        
      },
      error: err => {
        console.error('Erro ao deletar o recurso:', err);
      }
    });
  }
  
  navigateToNovaDenuncia() {
    this.router.navigate(['criar-denuncia']);
  }

  applyFilter(event: Event): void {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

}

<mat-form-field appearance="outline">
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input>
</mat-form-field>

<button mat-stroked-button (click)="navigateToNovaDenuncia()" class="navigate-button">Nova Denúncia</button>


<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>
    <ng-container matColumnDef="Relato">
        <th mat-header-cell *matHeaderCellDef style="text-align: center;"> relato </th>
        <td mat-cell *matCellDef="let element" style="text-align: center;"> {{element.relato}} </td>
    </ng-container>
    <ng-container matColumnDef="Status">
      <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Status </th>
      <td mat-cell *matCellDef="let element" style="text-align: center;"> {{element.statusRD}} </td>
  </ng-container>
  <ng-container matColumnDef="Data">
    <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Data </th>
    <td mat-cell *matCellDef="let element" style="text-align: center;"> 
      {{ element.dataEmissao | date: 'dd/MM/yyyy' }}
    </td>
  </ng-container>

    

    
    <ng-container matColumnDef="Acoes">
        <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Ações </th>
        <td mat-cell *matCellDef="let element" style="text-align: center;">
          <button mat-stroked-button (click)="deleteDenuncia(element.id)">
            Deletar
          </button>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

    <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell" colspan="4">Nenhuma informação encontrada "{{input.value}}"</td>
    </tr>
    
</table>
<mat-paginator
  [pageSizeOptions]="[2, 10, 20]"
  [pageSize]="2"
  showFirstLastButtons
  aria-label="Select page of periodic elements">
</mat-paginator>

here is everything working when the project first starts: working and here: after I save and the project reloads

I already tried adding "ChangeDetectorRef", it doesn't work as well. If I mock the page item it also doesn't work so I know that is something related to how the paginator is configured.

本文标签： Angular material paginator don39t work when I save a change on the codeStack Overflow