PrimeNG数据表:自定义过滤器输入

Question

我需要切换放置在表头中的过滤器输入的可见性.我试着这样做:

<input type="text"
       class="ui-column-filter ui-inputtext ui-widget ui-state-default ui-corner-all"
       [value]="dt.filters[col.field] ? dt.filters[col.field].value : ''"             
       (keyup)="dt.onFilterKeyup($event.value,col.field,col.filterMatchMode)"
       *ngIf="filterIsShown"/> 

https://plnkr.co/edit/o2wLmXHMb1uI5EvBmucr?p=preview

但我有一个错误 ERROR TypeError: Cannot read property 'filters' of undefined

那么我应该在哪里获得dt.filters对象？

- - - 更新 - - - -

感谢PierreDuc的回答,但过滤器仍然无效:(

我使用所有参数相应的模板我在这里找到https://github.com/primefaces/primeng/blob/master/src/app/components/datatable/datatable.ts

这里有更新的plunker
http://plnkr.co/edit/2MWxw0rfcLsDxmuIYRv9?p=preview

Answer 1

您应该将#dt变量添加到您的<p-dataTable>.这将创建一个链接到您的DataTable实例的模板变量:

plunkr

<p-dataTable ... #dt>

你必须改变你的keyup方法来传递正确的值:

(keyup)="dt.onFilterKeyup($event.target.value, col.field, col.filterMatchMode)"

plunkr

但是,您必须键入整个单词(Apple)才能使其正常工作.但我留给你修理:)