ionic 3 многоуровневый поисковый фильтр - PullRequest
Новая
       25

ionic 3 многоуровневый поисковый фильтр

0 голосов
/ 30 ноября 2018

Я хочу реализовать функцию поиска для многоуровневого массива.Я связал следующие данные с this.items (см. Изображение).Затем я использую следующий код TS для фильтрации.Он может фильтровать уровень category, но не в уровень products.

Как отфильтровать code в массиве products?То же самое касается desc и uom, если это возможно.Например, на изображении вы видите 7 элементов, если все 7 элементов отсутствуют в поиске, вся категория не будет отображаться.Если один или перемещаемый элемент существует, он будет отображаться.

HTML

<ion-searchbar [(ngModel)]="searchQuery" (ionInput)="filterItems($event.target.value)"></ion-searchbar>

Файл TS 

filterItems(param: any): void {
    let val: string = param;

    if (val) {
      if (val.trim() !== '') {
        this.filterItemsList = this.items.filter((data) => {
          console.log(data.category);
          return data.category.toLowerCase().indexOf(val.toLowerCase()) > -1;
        })
      }
    }
}

Изображение enter image description here

1 Ответ

0 голосов
/ 30 ноября 2018

Как указано в моем ответе здесь вы можете комбинировать различные условия с логическим оператором ИЛИ.Используя этот метод some , вы можете попробовать что-то вроде: 

filterItems(param: any): void {
    let val: string = param;

    if (val) {
      if (val.trim() !== '') {
        this.filterItemsList = this.items.filter((data) => {
          console.log(data.category);
          return data.category.toLowerCase().indexOf(val.toLowerCase()) > -1
            || data.products.some(product => product.code.toLowerCase().indexOf(val.toLowerCase()) > -1);
        })
      }
    }
  }

Как это работает?

some()Метод проверяет, прошел ли хотя бы один элемент массива тест, реализованный предоставленной функцией.

Таким образом, мы можем легко проверить, есть ли у какого-либо из ваших продуктов код, содержащий значение поиска.Вы можете сделать это и для других ваших свойств, также объединяя их с помощью логического ИЛИ (||) снова, как для desc и так далее: 

return data.category.toLowerCase().indexOf(val.toLowerCase()) > -1
        || data.products.some(product => product.code.toLowerCase().indexOf(val.toLowerCase()) > -1)
        || data.products.some(product => product.desc.toLowerCase().indexOf(val.toLowerCase()) > -1);
...