全局过滤器 PrimeNG Angular2

Question

如何在primeng angular2中应用多个全局过滤器，例如全局过滤器中的一个输入，下拉列表和日期范围？如何为下拉菜单和日期范围等其他人添加。对于输入，我们可以这样使用：

<div>
    <input #gb type="text" placeholder="Global search">
</div>
<p-dataTable [value]="workOrders" [globalFilter]="gb">` 

Answer 1

全局过滤器仅用于包含搜索。您可以查看此过滤器部分

http://primefaces.org/primeng/#/datatable/filter

如果以这种方式使用它，则应根据使用情况将组件信息添加到 app.module.ts。

Answer 2

如果要基于多个输入进行筛选，则需要自己实现筛选器逻辑。在任何控件的值更改事件上，可以调用 .ts 文件中的函数，在该函数中可以筛选表的数据源。例如，我有一堆列表框（每列一个），它们显示在侧板上，以显示我的数据表的亚马逊样式筛选。代码看起来像这样 -

<p-accordion [multiple]="true" *ngFor="let col of filterColumns; let i=index" >
            <p-accordionTab header="{{col.display}}"  [selected]="showAllFilters">
                <p-listbox  [style]="{'width':'180px'}" [options]="col.values" [(ngModel)]="this['Selected' + col.display]" multiple="multiple" checkbox="checkbox" filter="filter" (onChange) = "advancedFilterChange(this['Selected' + col.display],col.column,'in')"></p-listbox>
            </p-accordionTab>                         
        </p-accordion>  

背后的代码看起来像这样——

    private advancedFilterChange(values:string[],col:string,matchMode:string):void{
      this.programTable.filter(values,col,matchMode);
 }

其中 programTable 是对 html 中 primeng 数据表的引用，您可以使用 viewchild 访问该表

。

@ViewChild('dtPrograms') programTable:DataTable;

希望这有帮助...