Question

如果我有像

这样的对象数组

 [
   {name: 'aaa', type: 'A'},
   {name: 'aaa', type: 'B'},
   ....
 ]

如何在ngFor表达式中使用管道创建过滤器，类似于

*ngFor='let obj of array | filter:name[nameValue]:type[typeValue]

此处，name[nameValue]名称是属性，nameValue是其值。只显示name属性中nameValue和type属性中typeValue匹配的对象。

我想要一个更通用的过滤器，它可以接收任何property[propertyValue]并可以相应地过滤输出。

Answer 1

这是你可以做到的一种方式。只需为过滤器管道提供一个字段数组，其中包含要用其过滤的值。

管道：

@Pipe({
    name: 'filter',
    pure: false
})
export class FilterPipe implements PipeTransform {

    transform(values: Array<any>, args:any[]):any {
        return values.filter((value) => {
            for (let i = 0; i < args.length; i++) {
                if (value[args[i][0]] != args[i][1]) {
                    return false;
                }
            }
            return true;
        });
    }
}

模板中的代码：

  <h3>Only Type A:</h3>
  <div *ngFor="let elm of arr | filter:[['type', 'A']]">
    <span>Name: {{elm.name}}</span> | <span>Type: {{elm.type}}</span>
  </div>

  <h3>Name bbb and Type B:</h3>
  <div *ngFor="let elm of arr | filter:[['type', 'B'], ['name', 'bbb']]">
    <span>Name: {{elm.name}}</span> | <span>Type: {{elm.type}}</span>
  </div>

工作示例
Plunker

管道过滤器基于Angular2中的两个或多个属性值

1 个答案: