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没有FilterPipe或OrderByPipe。

尝试使用RxJS实现过滤功能。

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

1 个答案: