如何以角度过滤具有多个属性的数组答案

【问题标题】：how to filter array with multiple properties in angular如何以角度过滤具有多个属性的数组
【发布时间】：2018-06-04 07:56:27
【问题描述】：

我在我的 Angular 5 项目中创建了一个管道，它将从 html 和过滤器数组中获取输入，并返回过滤后的数组。但目前我正在从 HTML 文件中传递属性名称（“firstName”）。现在我想要它，它应该从属性“firstName”和“lastName”中过滤。请告诉我我应该改变什么来做同样的事情？？？

搜索过滤器.pipe.ts

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

@Pipe({
    name: 'searchFilter'
})
export class SearchFilter implements PipeTransform {
    transform(data: any, search?: string, propertyName?: string): any {
        if (search === undefined) {
            return data;
        } else {
            return data.filter(obj => obj[propertyName].toLowerCase().includes(search.toLowerCase()));
        }
    }
}

user.component.html

<div class="row" *ngFor="let data of datas| searchFilter: search: 'firstName'}">
   {{data.lastName}}, {{data.firstName}}
</div>

样本数据.ts

 datas: [
{ firstName: 'vipin', company: 'abc', lastName: 'sharma' },
{ firstName: 'kevin', company: 'abc2', lastName: 'xyz' },
{ firstName: 'Leos', company: 'abc3', lastName: 'abc' },
]

【问题讨论】：

传递“firstName|lastName”之类的搜索文本并在管道中拆分，然后进行适当的搜索
能否写出指令的代码。

标签： angular angular2-template angular2-forms angular2-directives angular6

【解决方案1】：

我得到了我的答案并且它工作正常：

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

@Pipe({
    name: 'searchFilter'
})
export class SearchFilter implements PipeTransform {
    transform(data: any, search?: string, propertyName?: string, propertyName2?: string): any {
        if (search === undefined) {
            return data;
        } else {
            let filteredData = data.filter(obj => obj[propertyName].toLowerCase().includes(search.toLowerCase()));
            if (propertyName2) {
                filteredData = filteredData.concat(data.filter(obj => obj[propertyName2].toLowerCase().includes(search.toLowerCase())));
            }
            return filteredData;
        }
    }
}

【讨论】：

【解决方案2】：

你可以做的是连接你想要搜索的属性：

this.items.map((item) => {
  return {...item, searchTerms: item.firstname + item.lastname;
});

<li *ngFor="let item of items | searchFilter:search:'searchTerms'>{{item.name}}</li>

【讨论】：

【解决方案3】：

你可以这样试试

 this.data.filter((element: datatype) =>element.firstName && element.lastName)

【讨论】：