it-swarm.com.de

Angular Material Table filterPredicate

Ich versuche, eine Reihe von Daten nach einem bestimmten Objektschlüssel zu filtern. Beispiel: Ich habe eine Reihe von Fähigkeiten, ich möchte alle Fähigkeiten auf Stufe 2 sehen.

Ich habe die Dokumente gelesen, dieses Github-Beispiel und diese andere Frage , aber ich kann kein aktuelles Beispiel dafür finden, wie Benutzereingaben zum Filtern nach einem Objekt verwendet werden können Schlüssel. Bisher passiert nichts, wenn ein Benutzer auf eine Fähigkeitsstufe klickt.

Alle Hinweise wäre dankbar.

Im Moment sieht mein HTML so aus:

<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 }}

und mein TS sieht so aus:

 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;
  }
12
gv0000

Durch Setzen von filterPredicate legen Sie nur fest, wie ein Filterwert auf Ihre Daten angewendet werden soll, wenn ein Filterwert angegeben wird. Es ist nur die Definition der Filterfunktion, Sie wenden den Filter nicht tatsächlich damit an. Daher müssen Sie dies nur einmal definieren, was beispielsweise im ngOnInit vorkommen kann.

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

Um Ihren Filter dann mit einem tatsächlichen Wert anzuwenden, müssen Sie dataSource.filter, beispielsweise:

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