如何使用下拉列表过滤 primeNG 表并仅在按下应用按钮时应用过滤器？答案

【问题标题】：How to filter on a primeNG table with a dropdown and apply the filter only when pressing the apply button?如何使用下拉列表过滤 primeNG 表并仅在按下应用按钮时应用过滤器？
【发布时间】：2021-05-31 01:51:40
【问题描述】：

我正在尝试使用下拉菜单过滤 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

【问题讨论】：

标签： primeng primeng-turbotable

【解决方案1】：

我不知道你是否还需要答案，但无论如何我都会把它贴出来让其他人找到。

过滤器的 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 事件的方法，那就更好了。

编辑：这当然只适用于自定义过滤器，当您向默认过滤器添加新约束时，它将触发延迟加载。

【讨论】：

嗨@khai，感谢您的帮助。这就是我一直在寻找的。有没有办法在lazy_load 事件中本地应用所有过滤器？这是一个编辑过的 stackblitz 与您的建议 stackblitz.com/edit/…
可能有一种方法可以通过手动编辑表“过滤器”属性来实现，但我不知道界面是否会随之更新。我不会相信它
@khai，谢谢！这有助于调试过滤器代码。

【解决方案2】：

我通过覆盖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>

【讨论】：