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

【问题标题】：global filter does not work when click the remove icon单击删除图标时全局过滤器不起作用
【发布时间】：2017-11-22 18:50:18
【问题描述】：

我使用了启动全局过滤器

<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 文档。但在最新版本中也有同样的问题:( :(

【问题讨论】：

标签： angular typescript filter primeng global-filter

【解决方案1】：

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

这里的技巧是当用户单击“X”图标以清除过滤器文本时发出一个keyup事件。这是因为primeng数据表组件仅在“keyup”事件发生时刷新它的过滤器状态。

(search) 事件在用户点击“X”图标时触发，此时输入类型=“search”。请在您提到 type='text' 的问题陈述中更正这一点。

你的.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> --

你的.component.ts

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

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

【讨论】：

您也可以从图标或img 元素的点击事件中调用相同的函数，即clearFilterText()。我想我不知道你指的是哪个删除图标？所以我添加了清除按钮
@ramesh-rajendran 我已经修改了答案，无需额外按钮即可工作。但该解决方案适用于 input type='search' 不适用于 input type='text'。文本不会出现十字图标。