javascript - 过滤 javascript 表 (Angular) 组合结果中的每列

Question

我有一个用于 Angular 的 ngx-datatable，它不支持按列过滤。我想为每一列添加一个输入过滤器(有些是字符串，有些是多项选择等)并将它们组合到一个过滤器中，这样我就可以使用它从后端通过 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 响应？

Answer 1

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

一种方法是在组件中创建一个对象filters，并将其属性双向绑定(bind)到列标题中的搜索输入。监听ngModelChange事件并触发实际的过滤。

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

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

在您的 HTML 模板中绑定(bind)它并监听 ngModelChange 事件，以便在值发生变化时触发过滤(比使用 keyUp 更好，因为它也会在内容发生变化而无需按下按键时触发，例如通过上下文菜单复制粘贴)。

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