J.R*_*Rem 10 angular-pipe angular2-filtering angular
如何使用TS在Angular 2中搜索对象的所有属性中的字符串.
如果用户键入一个值,我想搜索所有属性值以推送符合键入值的客户,我会在带有搜索框的表中呈现一组客户.
export var CUSTOMER: Client[] = [
{ id: 1, name: 'John', phone: '888-888-888'},
{ id: 2, name: 'Nick', phone: '555-888-888'},
{ id: 3, name: 'Mike', phone: '666-888-888'},
];
Run Code Online (Sandbox Code Playgroud)
过滤管
import {Pipe, PipeTransform, Injectable} from "@angular/core";
@Pipe({
name: 'filter',
pure: false
})
@Injectable()
export class Ng2SearchPipe implements PipeTransform {
transform(items: any, term: any): any {
if (term === undefined) {
return items;
}
return items.filter(function(item){
return item.name.toLowerCase().includes(term.toLowerCase());
});
}
}
Run Code Online (Sandbox Code Playgroud)
在上面的过滤管道中,我只能按名称搜索.我不知道如何处理这个问题.我应该为Customer对象创建一个方法,该方法返回连接的所有属性值,然后在此连接值上搜索该术语吗?
上述答案中的一点修改由chrispy.需要应用null检查并使用.toString()否则,如果value为number,则无法使用toLowerCase()方法并引发错误.
return items.filter(item =>
Object.keys(item).some(
k =>
item[k] != null &&
item[k]
.toString()
.toLowerCase()
.includes(term.toLowerCase())
)
);
Run Code Online (Sandbox Code Playgroud)
您可以遍历项目的键并查看其中是否包含任何字符串,如果任意数量匹配,则返回true:
return items.filter(item =>
Object.keys(item).some(k => item[k].includes(term.toLowerCase());
)
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
9354 次 |
| 最近记录: |