Фильтрация данных таблицы Angular (без загрязненной трубы) - PullRequest
Новая
       25

Фильтрация данных таблицы Angular (без загрязненной трубы)

0 голосов
/ 02 мая 2020

У меня есть представление таблиц users, groups, customers, .. и я бы хотел иметь возможность фильтровать каждую таблицу. Точно знаю, что я использую трубу: 

<table [data]="customers | dataFilter: filterQuery"> ..</table>

Моя труба выглядит так: 

@Pipe({
  name: 'dataFilter',
  pure: false
})
export class Filterpipe implements PipeTransform {

  transform(array: any[], query: string, filterIndex = 'label'): any {
    if (query) {
      return _.filter(array, row => row[filterIndex].toLowerCase().indexOf(query.toLowerCase()) > -1);
    }
    return array;
  }

}

На данный момент я должен использовать pure: false флаг, потому что в противном случае таблица не обновится, если я изменю ее содержимое (например, добавлю элемент).

Я знаю, что этот канал действительно убивает производительность, и знаю, что я ищу альтернативу. Пока у меня есть 2 идеи, но я не знаю, какое из них является лучшим решением.

  1. Измените Pipe на pure:true: чем я всегда должен создавать известный экземпляр массив, когда я добавляю или удаляю элемент

  2. Поместите функцию фильтра в компонент, который сам по себе - но я должен включить его в каждый компонент

Какое решение лучше, или есть другой способ, о котором я не думаю?

...