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;

希望这会有所帮助......

全局过滤器PrimeNG Angular2

2 个答案: