Angular Material Table filterPredicate

Question

我正在尝试按特定对象键过滤一组数据例如：我有一套技能，我希望在第2级看到所有技能。

我已阅读了文档this github example和this other question，但我找不到用户输入如何用于按对象键过滤的实际示例。到目前为止，当用户点击技能级别时没有任何反应。

任何指针都会受到赞赏。

现在我的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() {
  this.dataSource.filterPredicate =
      (data: Skill, filter: string) => !filter || data.level == filter;
}

要将过滤器应用实际值，您需要设置dataSource.filter，例如：

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