我在angular 5项目中创建了一个管道,它将从html和filter数组中获取输入并返回已过滤的数组。但是目前我正在从HTML文件传递属性名称(" firstName")。现在我想要它,它应该从属性过滤" firstName"和" lastName"都。请告诉我应该做些什么来做同样的事情?
搜索filter.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>
采样data.ts
datas: [
{ firstName: 'vipin', company: 'abc', lastName: 'sharma' },
{ firstName: 'kevin', company: 'abc2', lastName: 'xyz' },
{ firstName: 'Leos', company: 'abc3', lastName: 'abc' },
]
答案 0 :(得分:0)
您可以做的是连接您要搜索的属性:
this.items.map((item) => {
return {...item, searchTerms: item.firstname + item.lastname;
});
<li *ngFor="let item of items | searchFilter:search:'searchTerms'>{{item.name}}</li>
答案 1 :(得分:0)
你能尝试这样吗
this.data.filter((element: datatype) =>element.firstName && element.lastName)
答案 2 :(得分:0)
我得到了答案并且工作正常:
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;
}
}
}