单击删除图标时全局过滤器不起作用

Question

我已经使用启动全局过滤器

<input #gb1 type="text" pInputText class="ui-widget ui-text" 
 placeholder="Find"><img class="search" src="assets/images/Search.png" />

 <p-dataTable class="ui-widget-h1-header1" [value]="searchHistoryList" 
[responsive]="true" [rows]="10" [globalFilter]="gb1" #dt1>...

一切正常。但如果我在单击删除图标时清除了值，它就不起作用了。

我已签入 https://www.primefaces.org/primeng/#/datatable/filter 文件。但在最新版本中也有同样的问题:( :(

Answer 1

这是解决您的问题的方法。

这里的技巧是当用户点击 'X' 图标清除过滤器时发出一个 keyup 事件 text.This 是因为 primeng 数据表组件只在 'keyup' 事件发生时刷新它的过滤器状态.

（搜索）事件在用户单击 'X' 图标时触发，这是在输入类型='search' 时。请在您提到的问题陈述中更正此问题 type='text'.

your.component.html

<input #gb1 (search)="refreshFilterState()" [(ngModel)]="filterText" type="search" pInputText class="ui-widget ui-text" placeholder="Find"><img class="search" src="assets/images/Search.png"/>


<p-dataTable class="ui-widget-h1-header1" [value]="searchHistoryList" [responsive]="true" [rows]="10" [globalFilter]="gb1" #dt1> --

your.component.ts

import {InputText} from 'primeng/primeng'
@ViewChild('gb1') inputtext: InputText;

refreshFilterState(){
   this.inputtext['nativeElement'].dispatchEvent(new KeyboardEvent('keyup'));
 }

单击删除图标时全局过滤器不起作用

global filter does not work when click the remove icon

angular

typescript

filter

primeng

global-filter