我对Angular2和4很新。 我有类型类(Item)的项目列表。 项目字段是名称,价格和描述。 我想在用户输入项目名称时创建一个搜索框,它会显示正确的项目对象。
我按照这个例子:http://www.angulartutorial.net/2017/03/simple-search-using-pipe-in-angular-2.html 但它没有用,我认为因为如果在字符串之间搜索而不是类型项目的对象。
答案 0 :(得分:1)
如果您使用了教程中的代码,使用对象数组,您只需要在Angular2管道中更新transform方法的return语句,如下所示:
return value.filter(function (el: any) {
return el.name.toLowerCase().indexOf(input) > -1;
})
PS:我添加了el.name,但您可以搜索说明或任何您喜欢的内容。
答案 1 :(得分:0)
创建自定义管道并将搜索参数传递给该管道,如下例所示
<li *ngFor="let n of list | FilterPipe: queryString : searchableList ">
{{n.name}} ({{n.age}})
</li>
this.searchableList = ['name','age']
您的自定义管道
@Pipe({
name: 'FilterPipe',
})
export class FilterPipe implements PipeTransform {
transform(value: any, input: string,searchableList : any) {
if (input) {
input = input.toLowerCase();
return value.filter(function (el: any) {
var isTrue = false;
for(var k in searchableList ){
if(el[searchableList[k]].toLowerCase().indexOf(input) > -1){
isTrue = true;
}
if(isTrue){
return el
}
}
})
}
return value;
}
}