Angular 5 Material Table 用具有不同参数类型的函数替换 filterPredicate [英] Angular 5 Material Table replace filterPredicate with function that has different parameter types

问题描述

我目前正在开发一个组件，该组件使用材料 2 表来显示一些数据.我需要能够编写自定义过滤器操作(例如价格 > 1)并组合多个过滤器.为了完成这项工作，我编写了一个自定义 filterPredicate:

I'm currently working on a component that uses the material 2 table to show some data. I need to be able to write custom filter operations (e.g. price > 1) and combine multiple filters. To make that work i wrote a custom 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，如果不满足一个或多个条件，则返回 false.

The customFilterPredicate loops through all the filters the where passed as parameter and returns true if all conditions have been met and false if one or more have not.

现在我使用这个函数通过service获取表的数据，设置我的dataSource并替换dataSource的filterPredicate:

Now I use this function to get the data for the table via service, set my dataSource and replace the filterPredicate of the dataSource:

  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，因为它期望过滤器参数是一个字符串.

To funny thing is that the filtering works when I use it, but it always throws an error saying that I cant replace the filterPredicate with my custom one, since it expects the filter parameter to be a string.

所以我的问题是，如何用我的替换 this.dataSource.filterPredicate ，而不用重写 material 2 包中的函数.有没有办法在打字稿中做到这一点?

So my question is, how can I replace this.dataSource.filterPredicate with mine, without rewriting the function in the material 2 package. Is there a way to do this in typescript?

如果有人知道为什么会这样，尽管抛出错误，那会很有趣，哈哈

And if anyone has an idea why this works, despite throwing the error, that would be interesting to haha

推荐答案

目前不支持，但有一个开放的 功能请求.它已添加到功能列表中，因此可能值得关注.

This is currently not supported but there is an open feature request on Github. It was added to the features list, so it might be worth following.

在该问题中，建议使用接受数组而不是字符串的过滤器创建自己的 DataSource.看看 MatTableDataSource 扩展了 DataSource班级.

In the issue, it is suggested to create your own DataSource with a filter that accepts arrays instead of strings. Have a look at the MatTableDataSource which extends the DataSource class.

这篇关于Angular 5 Material Table 用具有不同参数类型的函数替换 filterPredicate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！