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

Question

我需要切换 table header 中过滤器输入的可见性。我试着这样做：

<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 object？

------已更新------

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

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

PrimeNG datatable: customize filter input

primeng

angular