问题描述
我正在尝试使用下拉菜单过滤 primeNG 表中的一列,但我只想在按下“应用”按钮时应用过滤器。现在过滤发生在 onChange 事件中。如果我删除 onChange 事件过滤器不起作用
这是没有 onChange 事件的代码:
<p-table #dt1 [value]="customers">
<ng-template pTemplate="header">
<tr>
<th>
<div>
Status
<p-columnFilter field="status" matchMode="equals" display="menu" [showOperator]="false" [showMatchModes]="false">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-dropdown [ngModel]="value" [options]="statuses" placeholder="Any">
<ng-template let-option pTemplate="item">
{{option.label}}
</ng-template>
</p-dropdown>
</ng-template>
</p-columnFilter>
</div>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td>
{{customer.status}}
</td>
</tr>
</ng-template>
</p-table>
当我按下应用按钮时,过滤器值为空
这是一个堆栈闪电战:https://stackblitz.com/edit/primeng-tablefilter-demo-hbvzhe
解决方法
我通过覆盖 Apply
和 Clear
按钮找到了另一种方法。我的例子涉及日历日期的选择,但重点是相同的。
过滤器模板如下所示:
<p-columnFilter field="createdDate" matchMode="between" [display]="'menu'" [showAddButton]="false"
[showMatchModes]="false" [showOperator]="false" [showClearButton]="false" [showApplyButton]="false">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-calendar #createdCalendar [inline]="true" [readonlyInput]="true" [selectionMode]="'range'"></p-calendar>
<div class="p-d-flex p-jc-between p-ai-center p-mt-3">
<p-button label="Clear" styleClass="p-button-outlined" (onClick)="filter(undefined)"></p-button>
<p-button label="Apply" (onClick)="filter(createdCalendar.value)"></p-button>
</div>
</ng-template>
</p-columnFilter>
,
我不知道你是否还需要这个答案,但我还是会贴出来让其他人找到。
关于过滤器的 filterCallback 元素的文档并不是很清楚(如果我遗漏了什么,请随时告诉我),但我设法阻止它用这个调用延迟加载代码:
关于过滤器模板本身:
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-dropdown
[ngModel]="value"
(onChange)="customFilterCallback(filter,$event.value)"></p-dropdown>
</ng-template>
customFilterCallback(filter: (a) => void,value: any): void {
this.stopListening = true;
filter(value);
this.stopListening = false;
}
关于监听表的onLazyLoad事件的方法:
(onLazyLoad)="lazy_load($event)"
lazy_load(event: LazyLoadEvent): void {
if (this.stopListening) {
return;
}
...loading stuff
}
使用此解决方案,您可以在每次更改自定义过滤器时停止加载。 当然,显示的数据不会与过滤器匹配,直到按下“应用”按钮(或直到以任何其他方式触发延迟加载)。
如果库提供了一种在过滤器更改时停止 onLazyLoad 事件的方法,那真的会更好。
编辑: 这当然仅适用于自定义过滤器,当您向默认过滤器添加新约束时,它会触发延迟加载。