Angular Material Table filterPredicate

Question

我試圖通過特定的對象密鑰過濾一組數據例如：我有一套技能，我希望看到2級的所有技能。

我已經閱讀了文檔， 這個github示例 ，以及另一個問題，但我找不到用戶輸入如何用於按對象鍵過濾的實際示例。 到目前為止，當用戶點擊技能級別時沒有任何反應。

任何指針將不勝感激。

現在我的HTML看起來像：

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

我的TS看起來像：

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

Answer 1

通過設置filterPredicate ，您只需定義在給定過濾器值時應如何對數據應用過濾器值。 它只是過濾器功能的定義，實際上並沒有應用過濾器。 因此，您只需要定義一次，例如可以在ngOnInit中進行ngOnInit 。

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

要使用實際值應用過濾器，您需要設置dataSource.filter ，例如：

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