我正在尝试制作一个灵活的管道来过滤我的对象数组,以便用* ngFor
显示它<div class="wrapper" *ngFor="let item of items | myFilter:property:true">
例如,我想只为具有true属性的对象显示div:
[
{'name':'first', 'property': 'true'},
{'name':'last', 'property': 'false'}
]
当我尝试像这样动态设置属性
时似乎无法工作import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'myFilter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], key: any, value: any): any {
return items.filter(item => item[key] === value ? item : null);
}
}
我也试过这个
item['"' + key + '"']
和this(使用es6模板字符串)
item[`"$key"`]
但如果我像这样直接调用属性
,这个管道效果很好item.property
我真的需要让它更灵活,因为我的应用程序中有很多情况需要按不同的属性值过滤项目
答案 0 :(得分:0)
Array.filter
希望您的过滤器功能返回boolean
,这意味着您应该为此更改过滤器:
transform(items: any[], key: any, value: any): any {
return items.filter(item => item[key] === value);
}
来源:MDN
答案 1 :(得分:0)
您的管道绝对正确,您只是错过了HTML上的''
。试着像这样称呼它:<div class="wrapper" *ngFor="let item of items | myFilter:'property':true">
它会完美地运作。这是因为管道需要一个字符串,但是您提供了一个对象引用。 property!='property'