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

Question

如果我有像这样的对象数组

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

如何在ngFor表达式中使用管道创建过滤器,例如

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

这里,name[nameValue] name是属性,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