web-dev-qa-db-ja.com

Angular Material Table filterPredicate

特定のオブジェクトキーでデータのセットをフィルター処理しようとしている例：スキルのセットがあり、レベル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;
  }
javascriptangularfilterangular-materialangular-filters
12
gv0000

filterPredicateを設定することにより、フィルター値が与えられたときにフィルター値をデータに適用する方法のみを定義します。これはフィルター関数の定義に過ぎず、実際にフィルターを適用するわけではありません。したがって、これを定義する必要があるのは一度だけで、たとえばngOnInitで発生する可能性があります。

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

次に、実際の値でフィルターを適用するには、dataSource.filterを設定する必要があります。次に例を示します。

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