Как выполнить фильтрацию в таблице primeNG с раскрывающимся списком и применить фильтр только при нажатии кнопки применения?

Я пытаюсь отфильтровать столбец в таблице 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
person Gringo    schedule 01.03.2021    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я не знаю, нужен ли вам ответ, но я все равно отправлю его, чтобы другие люди могли его найти.

Документация не совсем ясна по элементу 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 при изменении фильтра.

РЕДАКТИРОВАТЬ: это, конечно, работает только для настраиваемых фильтров, когда вы добавляете новое ограничение к фильтру по умолчанию, оно запускает ленивую загрузку.

person Khai    schedule 09.03.2021
comment
Привет @khai, спасибо за помощь. Это то, что я искал. Есть ли способ применить все фильтры локально в событии lazy_load? Вот отредактированный stackblitz с вашим предложением stackblitz .com / edit / - person Gringo; 09.03.2021
comment
Вероятно, есть способ сделать это, отредактировав свойство фильтров таблицы вручную, но я не знаю, будет ли интерфейс обновляться вместе с ним. Я бы не поверил этому - person Khai; 11.03.2021

arrow_upward
1
arrow_downward

Я нашел другой способ, переопределив кнопки 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>
person Polad    schedule 24.04.2021