вот angular таблица материалов со свойством dataSource:
<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>
, и это соответствующий файл ts, который захватывает данные из вызова API остальных:
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);
}
я попробовал все решения из предыдущего поста, но все еще не работает, я не использую нумерацию страниц или фильтрацию на стороне сервера, я хочу просто разбить на страницы и фильтровать в angular mat табе