Question

我正在将PrimeNG p-table与带有input和p-dropdown过滤器的标题行一起使用，并且需要清除input 和< / strong>调用表上的p-dropdown方法时的.reset()。

就像其他人指出的那样（https://stackoverflow.com/a/51402834/5764320），您可以在[value]元素上使用input，但是似乎没有清除任何非{{1 }}过滤值。

如何重置input（和其他非p-dropdown过滤器类型）的过滤器值？

Answer 1

我想出了一种简单，干净的方法，您可以使用input完成此操作。

将包含过滤器的ng-template放入<tr>
使用ng-template和ng-template将[ngTemplateOutlet]添加到HTML两次，并分配一个值进行切换，以便一个模板用于*ngIf，另一个用于{ {1}}。
清除过滤器时切换分配给模板的值。

这可以“清除”过滤器，因为Angular在切换时会从DOM中完全添加和删除模板的HTML，这意味着不再使用以前使用过的任何值。

HTML

这假设您正在使用true，以便可以通过单击按钮来传递false。

注意：将与<p-table #dt ...>相关的部分和属性保留下来以保持其清洁。

dt

TypeScript

p-table

Answer 2

我只是通过引用ts组件中的来手动清除它们。

模板

<p-dropdown #myDropDown (onChange)="dt.filter($event.value, col.field, 'equals')">
</p-dropdown>

TypeScript

...
      @ViewChild("myTable", {static: false}) myTable: Table
      @ViewChild("myDropDown", {static: false}) myDropDown: Dropdown
      
      onResetTable() {
        this.myTable.clear()
        this.myDropDown.clear(null);
      }
...

PrimeNG p表：重置表过滤器时如何清除p下拉过滤器值？

2 个答案:

HTML

TypeScript