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>

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

这是一个堆栈闪电战：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 事件的方法，那真的会更好。

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

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

2 个答案: