为PrimeNG Angular 2制作自己的过滤器

Question

Primefaces PrimeNG有自己的内置过滤功能，如此

<p-column field="id" header="ID" [filter]="true"></p-column>

我想调用我在组件中编写的自己的过滤器函数。

如何在PrimeNG中使用它？

Answer 1

您应该使用ng-template进行过滤，然后您可以在输入更改时调用自己的函数。

<p-column field="ColumnName" header="ColumnName" [filter]="true"                                             filterMatchMode="contains" [sortable]="true">
<ng-template let-col pTemplate="header">
   <span [pTooltip]="'ColumnName'" tooltipPosition="bottom" appendTo="body">
   ColumnName 
   </span>
</ng-template>
<ng-template let-col pTemplate="filter">
   <div class="txt-search-input-table" *ngIf="localSearch">
      <input id="txtColumnName" type="text" #txtColumnName (keyup)="YourOwnFunction(txtColumnName.value)" styleClass="ui-column-filter"
      class="form-control pull-left ipt-width-slam" name=""/>
   </div>
</ng-template>
<ng-template let-col let-row="rowData" pTemplate="body">
   <span appendTo="body" style="position: relative;">                     
   {{row[col.field]}}
   </span>
</ng-template>
</p-column>

Answer 2

我在考虑使用回调，你在onFocus事件中传递一个回调函数：

onFocus事件：浏览器事件当下拉列表获得焦点时调用的回调。