PrimeNG table 对每一列的过滤和排序不起作用

Question

我正在使用 PrimeNG 创建 table。我想允许用户按列排序和过滤。我可以成功排序，但是当我尝试输入任何列的过滤器文本输入时，输入失去焦点并且该列被排序。我调试了一点，似乎只要在 table 的 header 中捕获点击，primeNG 的排序功能就会被激活。由于我的筛选器输入位于 header 内，当我尝试单击它开始输入时，它会激活排序并且我失去了焦点。

Stackblitz 再现：https://stackblitz.com/edit/primeng-table-g9uxkf

知道如何解决这个问题吗？

提前谢谢你。

Answer 1

我最后做的是捕获文本输入（过滤器）上的点击事件并停止其传播。

clickOnFilter(event: Event) {
    event.stopPropagation();
}

Answer 2

将此添加到输入标签帮助我解决了问题。现在搜索和排序也正常了

(click)="$event.stopPropagation()"

或

<input pInputText type="text" (click)="$event.stopPropagation()" (input)="dt1.filter($event.target.value, col.field, col.filterMatchMode)" [value]="dt1.filters[col.field]?.value">

PrimeNG table 对每一列的过滤和排序不起作用

PrimeNG table filtering and sorting on each column doesn't work

primeng

angular