Angular 材料数据表过滤和分页不适用于来自 rest 的数据 Api

Question

Here's angular material table with dataSource property:

 <!-- filter -->
    
    <mat-form-field>
        <input matInput (blur)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
    
    <!-- data table-->
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    
        <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->
    
      <!-- nom Column -->
        <ng-container matColumnDef="cin">
            <th mat-header-cell *matHeaderCellDef> Cin </th>
            <td mat-cell *matCellDef="let chauffeur"> {{chauffeur.cin}} </td>
        </ng-container>
    
        <!-- nom Column -->
        <ng-container matColumnDef="nom">
            <th mat-header-cell *matHeaderCellDef> Nom </th>
            <td mat-cell *matCellDef="let chauffeur"> {{chauffeur.nom}} </td>
        </ng-container>
    
        <!-- prenom Column -->
        <ng-container matColumnDef="prenom">
            <th mat-header-cell *matHeaderCellDef> prenom </th>
            <td mat-cell *matCellDef="let chauffeur"> {{chauffeur.prenom}} </td>
        </ng-container>
    
        <!-- prenom Column -->
        <ng-container matColumnDef="dateExpr">
            <th mat-header-cell *matHeaderCellDef> Date Expiration permis </th>
            <td mat-cell *matCellDef="let chauffeur"> {{chauffeur.dateValiditePermis}} </td>
        </ng-container>
     <!-- Actions Column -->
        <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef> Actions </th>
            <td mat-cell *matCellDef="let chauffeur">
                <button mat-button (click)="editChauffeur(chauffeur)">Détails</button>
                <button mat-button (click)="openDialog(chauffeur.idChauffeur)">Supprimer</button>
            </td>
        </ng-container>
    
    
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    
    


    <mat-paginator #paginator [pageSizeOptions]="[2,5, 10]" showFirstLastButtons></mat-paginator>
        <mat-divider></mat-divider>
    

and this is the correspondant ts file that captures data from rest api call:

 

     export class ChauffeurComponent implements OnInit {
             
               //---****----
               displayedColumns: string[] = ['cin','nom','prenom','dateExpr','actions'];
              
               //******bound to table data */
               dataSource=new  MatTableDataSource();
             
              //---paginator def
               @ViewChild(MatPaginator, {static:false}) paginator: MatPaginator;
            
            
              constructor(public dialog: MatDialog, private router:Router, private chauffeurService:ChauffeurService) {
             
                 //since ngOnint method is executed only once we have to
                //subscribe to routing to load data correctly whenver a route is activated to our component
                router.events.subscribe(event => {
                  if (event instanceof NavigationEnd) {
                    this.reloadData();
                  }
                });
            
               }
            
              ngOnInit() {
                
              }
            
            
              reloadData(){ 
            
               
                //get remoted data and populate dataSource object 
                this.chauffeurService.getChauffeurs().subscribe(dataFlow => {this.dataSource=dataFlow ;
                  this.dataSource.paginator = this.paginator;
                 
                }, 
                  error => {
                    
                  });
            }//----filter method
     applyFilter(filterValue: string) {
         this.dataSource.filter = filterValue.trim().toLowerCase();
         console.log("filtring : "+this.dataSource);
    }

I tried all the solution from the previous post but still doesn't work, I'm not using pagination or filtering in the server side i want simply pagination and filtering in angular mat tabe

Answer 1

the solution for this is to assign dataSource.data to the dataFlow from the api call instead of dataSource entire object:

this.dataSource.data = dataFlow

and everything worked correctly !