web-dev-qa-db-fra.com

Angular Material Table filterPredicate

J'essaie de filtrer un ensemble de données par une clé d'objet spécifique Ex: J'ai un ensemble de compétences, je veux voir toutes les compétences au niveau 2.

J'ai lu les documents, cet exemple github , et cette autre question mais je ne trouve pas d'exemple réel de la façon dont l'entrée utilisateur peut être utilisée pour filtrer par un objet clé. Jusqu'à présent, rien ne se produit lorsqu'un utilisateur clique sur un niveau de compétence.

Tout pointeur serait apprécié.

En ce moment, mon html ressemble à:

<mat-button-toggle-group #group="matButtonToggleGroup"
    class="margin-1" (change)=toggleSkillLevel(group.value)>

  <mat-button-toggle value="0">
    0
  </mat-button-toggle>

  <mat-button-toggle value="1">
    1
  </mat-button-toggle>

  <mat-button-toggle value="2">
    2
  </mat-button-toggle>

  <mat-button-toggle value="all">
    ALL
  </mat-button-toggle>

</mat-button-toggle-group>

{{ dataSource.filteredData }}

et mon TS ressemble à:

 import { Skill, SKILL_DATA } from '../data/skills-details';

...
...

  toggleSkillLevel(level){
    console.log('Only show level ' + level + ' skills...');
    this.dataSource.filterPredicate =
            (data: Skill, filter: string) => data.level == level;
  }
javascriptangularfilterangular-materialangular-filters
12
gv0000

En définissant filterPredicate, vous définissez uniquement comment une valeur de filtre doit être appliquée à vos données lorsqu'une valeur de filtre est donnée. Ce n'est que la définition de la fonction de filtre, vous n'appliquez pas réellement le filtre avec. Par conséquent, vous n'avez besoin de définir cela qu'une seule fois, ce qui pourrait par exemple se produire dans le ngOnInit.

ngOnInit() {
  this.dataSource.filterPredicate =
      (data: Skill, filter: string) => !filter || data.level == filter;
}

Pour appliquer ensuite votre filtre avec une valeur réelle, vous devez définir dataSource.filter, par exemple:

toggleSkillLevel(level) {
  this.dataSource.filter = level;
}
25
Kim Kern