Фильтры на столбец в таблице javascript (angular) объединили результаты

У меня есть ngx-datatable для Angular, который не поддерживает фильтр по столбцу. Я хотел бы добавить входной фильтр для каждого столбца (некоторые из них - строки, некоторые - несколько вариантов и т.д.) и объединить их в один фильтр, чтобы я мог использовать его для получения данных с помощью rxJs из бэкэнда.

Что у меня есть на данный момент:

Это компонент фильтра для каждого заголовка столбца:

<div class="input-group mb">
    <div class="input-group-addon">
        <span class="input-group-text" id="search-addon"><em class="icon-magnifier"></em></span>
    </div>
    <input aria-describedby="search-addon" id="order_id" aria-label="Customer" placeholder="Search" class="form-control" type="text" (keyup)='updateFilter($event)'>
</div>

Функция фильтра обновления

updateFilter(event) {

  let columnName = event.currentTarget.id;

  const val = event.target.value.toString().toLowerCase();
  const filteredData = this.temp.filter(function(d) {
    return d[columnName].toString().toLowerCase().indexOf(val) !== -1 || !val;
  });
  this.rows= filteredData;
  this.table.offset = 0;
}

Это работает для каждого столбца. Но как мне объединить все фильтры и начать наблюдать за ответом API?

0
0
273
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вашим методам updateFilter() требуются значения всех входов фильтра, а не только того, что передано через $event.

Одним из способов сделать это может быть создание объекта filters в вашем компоненте и двусторонняя привязка его свойств к вашим поисковым входам в заголовках столбцов. Прослушайте событие ngModelChange и активируйте фактическую фильтрацию.

class MyComp {
   // Other stuff
   filters = {};

   filter = () => {
       // Do the filtering, all filters are set in this.filter object
   }
}

В вашем шаблоне HTML свяжите его и прослушайте событие ngModelChange, чтобы запускать фильтрацию всякий раз, когда значение изменяется (лучше, чем использование keyUp, поскольку он также срабатывает, когда содержимое изменяется без нажатия клавиши, например, копирование и вставка через контекстное меню).

<input id="order_id" [(ngModel)]="filters.order_id" (ngModelChange)="filter()" ... />

Другие вопросы по теме