angular - PrimeNG 数据表 : customize filter input

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) 才能正常工作。但我把它留给你来解决:)