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

对于不支持按列过滤的Angular，我有这个

ngx数据表。我想为每个列添加一个输入过滤器（一些是字符串，一些是多选项等），并将它们组合到一个过滤器中，这样我就可以使用它从后端通过
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>

这适用于每个专栏。但是如何组合所有过滤器并开始观察API响应？
您的
updateFilter（）
方法需要检查所有过滤器输入的值，而不仅仅是通过
$event
传入的值

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

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

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

在HTML模板中，绑定它并侦听ngModelChange事件，以便在值更改时触发筛选（优于使用
keyUp
，因为在内容更改时也会触发，而无需按下键，例如，通过上下文菜单复制粘贴）



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

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

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