filtre personnalisé dans le tapis de table
Je suis en utilisant tapis de table. Il dispose d'un filtre qui fonctionne très bien avec le doc exemple:
De https://material.angular.io/components/table/overview, le code d'origine est:
<div class="example-header">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>
<mat-table #table [dataSource]="dataSource">
<!-- the rest of the code -->
</mat-table>
export class TableFilteringExample {
displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); //Remove whitespace
filterValue = filterValue.toLowerCase(); //MatTableDataSource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
}
const ELEMENT_DATA: Element[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'}
];
Avec cette mise en œuvre, lorsque le filtre, le filtre pour n'importe quelle colonne.
Maintenant, je vais essayer de changer le filtre parce que je veux c'est de filtrer juste pour la colonne "nom", donc je suis en train de réécrire le filtre et d'attribuer à la filterData.
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); //Remove whitespace
filterValue = filterValue.toLowerCase(); //MatTableDataSource defaults to lowercase matches
this.dataSource.filteredData = this.filterByEmail(filterValue);
console.log(this.dataSource.filteredData); //value is what I want.
}
filterByName(filter: string): any {
const dataFiltered = this.data.filter(function(item){
return item.name.indexOf(filter) > -1
})
return dataFiltered;
}
Dans la console, je peux voir que cela.source de données.filteredData a des données que je veux imprimer, mais le tableau n'est pas de rechargement.
Ce sont je suis absent?
Vous devez vous connecter pour publier un commentaire.
J'ai trouvé la solution ici.
Il est nécessaire de réécrire
filterPredicate
, et l'utiliser comme d'habitude,filterPredicate
doit revenirtrue
lorsque le filtre passe etfalse
quand il n'est pasNe pas oublier d'appliquer
.trim().toLowerCase()
sur vos données ou vous pouvez rencontrer des résultats inattendus. Voir mon exemple ci-dessous: