Как мне отфильтровать angular мат-таблицу, используя несколько ключевых слов и / или частичное совпадение

Question

Я пытаюсь отфильтровать таблицу соответствия, сопоставляя точные строки для столбца, например, это две строки в одном столбце:

1. Джек хочет щенка
2. Джек хочет puppy dog ​​

Если я ищу Jack dog , то должна отображаться только вторая строка, содержащая строку. Поэтому я должен иметь возможность применять фильтр, используя несколько ключевых слов для отображения результатов. Я попытался настроить предикат фильтра, но фильтр не работает, когда я набираю Джек Дог . это проходит, если я наберу Джек хочет щенка точно. Можно ли настроить поиск так, чтобы он соответствовал буквам независимо от пробела и символов? т. е. jack do должен отображать только один результат. Вот мой подход

this.dataSource.filterPredicate =
      (data: UserData, filters: string) => {
        const matchFilter = [];
        const filterArray = filters.split(/[\s,]+/);
        const columns = (<any>Object).values(data);
        // OR be more specific [data.name, data.race, data.color];

        // Main
        filterArray.forEach(filter => {
          const customFilter = [];
          columns.forEach(column => customFilter.push(column.toLowerCase().includes(filter)));
          matchFilter.push(customFilter.some(Boolean)); // OR
        });
        return matchFilter.every(Boolean); // AND
      }
  applyFilterSimple(filterValue: string) {
    const filtersSimple = filterValue.trim().toLowerCase();
    this.dataSourceSimple.filter = filtersSimple;
  }

Answer 1

У меня есть этот пользовательский канал, возможно, вы можете добавить его в свой файл ts и использовать его там. Он принимает 3 параметра: массив объектов, свойство для фильтрации (может использоваться несколькими объектами) и строку, введенную пользователем. он возвращает только что отфильтрованный массив.

  transform(items: object[], propToFilterBy: string, searchText: string): object[] {
    if (!items) {
      return [];
    }
    if (!searchText) {
      return items;
    }
    searchText = searchText.toLowerCase();
    var searchArray = searchText.split(' ');

    return items.filter(elem => elem[propToFilterBy] && this.checkArray(elem[propToFilterBy].toLowerCase(), searchArray) );
  }

  checkArray(str: string, searchArray: string[]) {
    for (let i = 0; i < searchArray.length; i++) {
      if ( !str.includes(searchArray[i]) ) {
        return false;
      }
    }
    return true;
  }
}

По правде говоря, я добавил некоторый код для вашего варианта использования, и я не тестировал этот код интенсивно, так что он все еще может нуждаться в некоторой настройке.