2

現在、マテリアル 2 テーブルを使用してデータを表示するコンポーネントに取り組んでいます。カスタム フィルター操作 (価格 > 1 など) を記述し、複数のフィルターを組み合わせることができる必要があります。それを機能させるために、カスタムfilterPredicateを書きました：

customFilterPredicate(data: Coin, filters: Predicate[]): boolean {
  var operators = {
    '>=': function(a, b){
      return +a >= +b
    },
    '<=': function(a, b){
      return +a <= +b
    }
  }

  if(filters.length == 0) return true;
  let res = false;

  for(var i = 0; i < filters.length; i++){
    let conditionMet = operators[filters[i].op](data[filters[i].columnName], filters[i].val);
    if(conditionMet) {
      res = true;
    } else {
      res = false;
      break;
    }
  }
  return res
}

述語タイプのインターフェース:

export interface Predicate {
  field: columnName
  op: string;
  val: number;
  visible: boolean;
}

customFilterPredicate は、パラメーターとして渡されたすべてのフィルターをループし、すべての条件が満たされた場合は true を返し、1 つ以上の条件が満たされなかった場合は false を返します。

この関数を使用して、サービスを介してテーブルのデータを取得し、dataSource を設定して、dataSource の filterPredicate を置き換えます。

  setData(){
    return new Promise((resolve, reject) => {
      return this.coinService.getCoins()
      .subscribe(coins => {
          resolve(coins)
        })
    })
    .then((data: Coin[]) => {
      this.dataSource = new MatTableDataSource<Coin>(data);
      this.dataSource.filterPredicate = this.customPredicate;
    })
  }

面白いことに、使用するとフィルタリングが機能しますが、フィルターパラメーターが文字列であると想定されるため、filterPredicate をカスタムのものに置き換えることができないというエラーが常にスローされます。

私の質問は、マテリアル 2 パッケージの関数を書き直さずに、this.dataSource.filterPredicate を私のものに置き換えるにはどうすればよいかということです。タイプスクリプトでこれを行う方法はありますか?

そして、エラーをスローしたにもかかわらず、なぜこれが機能するのか誰かが考えているなら、それはハハにとって興味深いでしょう

4

2 に答える 2

4

これは現在サポートされていませんが、Github で機能リクエストが公開されています。機能リストに追加されたので、フォローする価値があるかもしれません。

DataSourceこの問題では、文字列の代わりに配列を受け入れるフィルターを使用して独自のフィルターを作成することをお勧めします。DataSourceクラスを拡張するMatTableDataSourceを見てください。

于 2018-04-17T21:55:06.583 に答える