在mat-filter的列中过滤多个值

Question

我想为多个值过滤Angular Material表中的一列。

我为此添加了两个过滤器。用于位置的下拉过滤器，具有对应于每个位置的复选框，以及用于名称的基于文本的过滤器。我希望过滤器以某种方式工作，如果我单击位置下拉列表中1和10的复选框，那么这两行都是可见的。但是，如果在选中这2个复选框时在名称过滤器中写H，则仅可见第1行。基本上，一个列的多个过滤器中的OR或不同列的过滤器之间的AND。

现在，我的代码适用于两个单独的过滤器之间的AND部分。但是，如果我在位置下拉菜单中选择了两个复选框，则这两列都不可见。

Attaching my code on Stackblitz for reference

Answer 1

我更改了customFilterPredicate中的一些代码

customFilterPredicate() {
    return (data: PeriodicElement, filter: string): boolean => {
      let searchString = JSON.parse(filter) as MyFilter;
      let isPositionAvailable = false;
      if (searchString.position.length) {
        for (const d of searchString.position) {
          // equal validate
          if (data.position.toString().trim() == d) {
          // OR
          // Checking index of
          if (data.position.toString().trim().indexOf(d) !== -1) {
            isPositionAvailable = true;
          }
        }
      } else {
        isPositionAvailable = true;
      }
      return isPositionAvailable && data.name.toString().trim().toLowerCase().indexOf(searchString.name.toLowerCase()) !== -1;
    }
  }

添加一些界面以便更好地输入

export interface MyFilter {
  position: string[],
  name: string,
  weight: string,
  symbol: string
}

还可以在filteredValues

中添加界面

filteredValues: MyFilter = { position: [], name: '', weight: '', symbol: '' };

Answer 2

您可以自己过滤数据并设置data中的dataSource。就像下面的代码。

用于过滤选项的方法。

filterOptions(positionValue: string[], nameValue: string): PeriodicElement[] {
  if ((!positionValue || positionValue.length === 0)  && !nameValue) {
    return ELEMENT_DATA;
  }
  const filtered = ELEMENT_DATA.filter((periodicElement) => {
    return (nameValue? periodicElement.name.toLowerCase().includes(nameValue.toLowerCase()): false) 
           || (positionValue ? positionValue.indexOf(periodicElement.position+'') !==-1: false)});
      return filtered;
}

您可以像下面这样在两个过滤器更改上使用此

this.positionFilter.valueChanges.subscribe((positionFilterValue)        => {
 this.dataSource.data = this.filterOptions(positionFilterValue, this.nameFilter.value);
});

this.nameFilter.valueChanges.subscribe((nameFilterValue) => {
  this.dataSource.data = this.filterOptions(this.positionFilter.value, nameFilterValue);
});

这是您进行了上述更改的更新代码https://stackblitz.com/edit/angular-hbakxo-e4njon