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

Question

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

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

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

在 Stackblitz 上附上我的代码以供参考

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: '' };