Question

我有这个ngx-datatable for 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响应？

Answer 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更好，因为它还会在内容更改时触发，而无需按下任何键，例如copy-通过上下文菜单粘贴）。

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

javascript表格（角度）合并结果中的每列过滤器

1 个答案: