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

Question

我正在尝试使用下拉菜单过滤 primeNG table 中的列，但我只想在按下“应用”按钮时应用过滤器。现在过滤发生在 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

Answer 1

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

过滤器的 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;
 }

关于监听table的onLazyLoad事件的方法：

(onLazyLoad)="lazy_load($event)"

lazy_load(event: LazyLoadEvent): void {
  if (this.stopListening) {
    return;
  }
  ...loading stuff
}

使用此解决方案，您可以在每次更改自定义过滤器时停止加载。当然，在按下“应用”按钮（或以任何其他方式触发延迟加载）之前，显示的数据不会与过滤器匹配。

如果库提供一种在更改过滤器时停止 onLazyLoad 事件的方法，那就更好了。

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

Answer 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>

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

How to filter on a primeNG table with a dropdown and apply the filter only when pressing the apply button?

primeng

primeng-turbotable