javascript table (Angular) 组合结果中的每列过滤器

Question

我有 Angular 的 ngx-datatable，它不支持按列过滤。我想为每一列添加一个输入过滤器（有些是字符串，有些是多项选择等）并将它们组合到一个过滤器中，这样我就可以使用它从后端获取 rxJs 的数据。

我目前拥有的：

这是每一列的过滤器组件header:

<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 响应？

Answer 1

您的 updateFilter() 方法需要所有过滤器输入的值，而不仅仅是通过 $event 传入的值。

一种方法是在组件中创建 object filters，然后 two-way 将其属性绑定到 headers 列中的搜索输入。监听 ngModelChange 事件并触发实际过滤。

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

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

在您的 HTML 模板中绑定它并监听 ngModelChange 事件以在值更改时触发过滤（比使用 keyUp 更好，因为它也会在内容更改时触发而无需密钥被按下，例如 copy-pasting 通过上下文菜单）。

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

javascript table (Angular) 组合结果中的每列过滤器

Filters per column in a javascript table (Angular) combined results

javascript

typescript

ngx-datatable

angular