Angular 8 多个搜索过滤器（管道）不工作

Question

我的搜索过滤器不起作用，因为我有一个搜索输入字段，我想在其中按员工编号或员工姓名进行搜索

我的搜索过滤器代码（管道）

   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>

Answer 1

TL;DR; 为了让你的管道正常工作，你需要让它 pure: false 而你不应该那样做！

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

管道原因是性能，不纯的管道是性能问题。 Angular 以前有过滤管但现在没有了 angular.io :

Angular doesn't have a FilterPipe or an OrderByPipe for reasons explained in the Appendix of this page.

尝试使用RxJS实现过滤功能

Angular 8 多个搜索过滤器（管道）不工作

Angular 8 multiple Search Filter (Pipe) not working

angular

angular8