Фильтр для нескольких значений в столбце в mat-filter

Question

Я хочу отфильтровать столбец в таблице угловых материалов для нескольких значений.

Я добавил два фильтра для этого.Раскрывающийся фильтр для позиции с флажками, соответствующими каждой позиции, и текстовый фильтр для имени.Я хочу, чтобы фильтр работал таким образом, чтобы, если я щелкну флажок 1 и 10 в раскрывающемся списке позиций, обе строки будут видны.Но если я напишу H в фильтре имен, когда отмечены эти 2 флажка, будет видна только строка 1.По сути, ИЛИ в нескольких фильтрах одного столбца и И между фильтрами разных столбцов.

Сейчас мой код работает для части И между двумя отдельными фильтрами.Однако, если я выберу два флажка в раскрывающемся меню положения, ни один столбец не будет виден.

Прикрепление моего кода на Stackblitz для справки

Answer 1

Вы можете просто отфильтровать данные самостоятельно и установить 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

Answer 2

Я изменил некоторые коды в 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: '' };