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