如何使用下拉菜单过滤 primeNG 表并仅在按下“应用”按钮时应用过滤器？

Question

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

当我按下“应用”按钮时，过滤器值为空

这是一个 stackblitz：https://stackblitz.com/edit/primeng-tablefilter-demo-hbvzhe

Answer 1

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

Answer 2

我不知道您是否还需要答案，但无论如何我都会将其发布以供其他人找到。

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

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