Угловой 8-кратный поисковый фильтр (труба) не работает - PullRequest
1 голос
/ 27 сентября 2019

Мой фильтр поиска не работает, так как у меня есть одно поле ввода для поиска, в котором я хочу выполнить поиск по номеру сотрудника или имени сотрудника

Код фильтра моего поиска (канал)

   import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'searchEmployee'
})
export class SearchEmployeePipe implements PipeTransform {
  transform(items: any, filter: any, isAnd: boolean): any {
    if (filter && Array.isArray(items)) {
      let filterKeys = Object.keys(filter);
      if (isAnd) {
        return items.filter(item =>
          filterKeys.reduce((memo, keyName) =>
            (memo && new RegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] === "", true));
      } else {
        return items.filter(item => {
          return filterKeys.some((keyName) => {
            console.log(new RegExp(filter[keyName], 'gi').test(item[keyName]) || filter[keyName])
            return new RegExp(filter[keyName], 'gi').test(item[keyName]) || filter[keyName] === "";
          });
        });
      }
    } else {
      return items;
    }
  };
}

Мой HTML-код

<div class="search-employee-input-div">
    <input type="text" placeholder="Search Employee" class="employee-list-searchbox" [(ngModel)]="employeeSearchQuery" [ngModelOptions]="{standalone: true}" />
  </div>

<li formArrayName="Employees" *ngFor="let emp of payrollProcessingList.Employees | searchEmployee: { EmployeeID: employeeSearchQuery, FullName: employeeSearchQuery }: false; let i = index;" class="emp-li-loop"></li>

1 Ответ

0 голосов
/ 27 сентября 2019

TL; DR; Для того, чтобы ваша труба работала, вам нужно будет сделать ее pure: false, и вам не следует этого делать!

@Pipe({
  name: 'searchEmployee',
  pure: false
})

Причина в трубепроизводительность, нечистые трубы являются проблемой производительности.В Angular раньше была труба фильтра, но больше нет angular.io :

У Angular нет FilterPipe или OrderByPipe по причинам, объясненным в Приложении на этой странице.

Попробуйте использовать RxJS для реализации функции фильтрации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...