如何使用管道过滤具有不同参数的数组

Question

我的 JSON 文件名为 employee 如下所示：

[
    {
        "id": "E01",
        "name": "neetha",
        "age": 20,
        "gender": "female",
    },
    {
        "id": "E02",
        "name": "Kiran",
        "age": 24,
        "gender": "male",
    },
   {
        "id": "E03",
        "name": "Jhon",
        "age": 28,
        "gender": "male",
    }   
]

我有一个名为 list 的组件，我在其中使用自定义管道过滤此 employees 及其名称：

list.component.html

<div>
    <mat-form-field>
        <input matInput [(ngModel)]="searchTerm"  placeholder="Search">
    </mat-form-field>
    <mat-selection-list class="list">
        <mat-list-option   *ngFor="let employee of employees | employeeFilter : searchTerm; let i=index">
            <a mat-list-item (click)="onSelect(employee,i)"><span>{{employee.name}}</span></a>
        </mat-list-option>
    </mat-selection-list>
</div>

员工-filter.pipe.ts

import { PipeTransform, Pipe } from '@angular/core';
import { Employee } from '../models/employee.model';

@Pipe({
    name: 'employeeFilter'
})
export class EmployeeFilterPipe implements PipeTransform {
    transform(employees: Employee[], searchTerm: string): Employee[] {
        if (!employees || !searchTerm) {
            return employees;
        }

        return employees.filter(employee =>
            employee.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1);
    }
}

现在我正在使用 name 属性进行过滤，但我想使用 age、gender 和 name 进行过滤。使用我要过滤的相同输入字段。我怎样才能做到这一点？

Answer 1

只需使用或运算符||

return employees.filter(employee =>
            employee.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1)
|| employee.age.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1)
|| employee.gender.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1)
);

Answer 2

此时需要对管道中的员工进行如下过滤：

return employees.filter((employee) => Object.values(employee).includes(searchTerm));

您的代码将如下所示：

import { PipeTransform, Pipe } from '@angular/core';
import { Employee } from '../models/employee.model';

@Pipe({
    name: 'employeeFilter'
})
export class EmployeeFilterPipe implements PipeTransform {
    transform(employees: Employee[], searchTerm: string): Employee[] {
        if (!employees || !searchTerm) {
            return employees;
        }

   //Parse a string to integer for the age
    let searchValue;
   if (!Number.isNaN(Number(searchTerm))) {
      searchValue = parseInt(searchTerm);
    } else {
      searchValue = searchTerm;
    }

        return employees.filter((employee) => (Object as any).values(employee).includes(searchValue));
    }
}

要查看此过滤器的工作情况，请查看：javascript filter array of objects

Answer 3

为单个输出创建管道并不是很酷。您可以像在组件上那样使用它：

get filteredEmployees() {

return employees.filter( anything you want )

}

在html中调用use {{ filteredEmployees }}.

如果这种过滤对于多个组件来说至少有点复杂和常见，请创建一个服务来存储这些功能并在上面的 getter 中调用它

Answer 4

 transform(employees: any[], searchTerm: string): any[] {

    if (!employees || !searchTerm) {
        return employees;
    }

    // remove the "id"
    const { id, ...objWithoutID } = employee;
    let values = Object.keys(objWithoutID).map(key => employee[key]);          
    // If you want fast and have a very large array of words, call toLowerCase once-  
    return values.join('|').toLowerCase().split('|').toString().indexOf(searchTerm.toString())!==-1
    })
}

工作Stackblitz

如何使用管道过滤具有不同参数的数组

How filter array with different parameters using pipes

typescript

angular-pipe

angular

angular6