用于过滤物体的柔性管道

时间:2017-05-18 13:46:53

标签: javascript angular typescript angular-pipe

我正在尝试制作一个灵活的管道来过滤我的对象数组,以便用* 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

我真的需要让它更灵活,因为我的应用程序中有很多情况需要按不同的属性值过滤项目

2 个答案:

答案 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'