0

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

还有这个（带有 es6 模板字符串）

item[`"$key"`]

但是如果我像这样直接调用属性，这个管道效果很好

item.property

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

4

2 回答 2

0

您的管道绝对正确，您只是缺少''HTML 上的。试着这样称呼它：<div class="wrapper" *ngFor="let item of items | myFilter:'property':true">它会完美地工作。这是因为管道需要一个字符串，但您提供的是一个对象引用。属性！='属性'

于 2017-05-18T14:01:31.603 回答
0

Array.filter期望您的过滤器函数返回 a boolean，这意味着您应该为此更改过滤器：

transform(items: any[], key: any, value: any): any {
     return items.filter(item => item[key] === value);
 }

来源：MDN

于 2017-05-18T13:51:56.553 回答