primeng - 如何使用下拉列表过滤 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

我不知道你是否还需要答案，但我还是会发布它以供其他人找到。

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

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