Question

考虑以下

这是我的组件

 @Component({
  selector: 'myInput',
  pipes: [myPipe],
  template: 
  `
    <input [(ngModel)]="searchText" placeholder="name">
    <li *ngFor="#item of items | searchByTitle: searchText">
      <div>{{item.title}}</div>
    </li>
  `,
 })

这是我的烟斗

@Pipe({
    name: "searchByTitle"
})
export class myPipe {

    transform(value, args: any[]) {
        return value.filter(item => item.title.indexOf(args[0]) !== -1);
    }
}

从上面的代码我们可以看到，我们使用用户输入的searchText过滤了列表，searchText是标题的过滤条件。

但是，如果我有以下数据

items = [{'myTitle': 'title1'}, {'myTitle': 'title2'}]

它不起作用，我只能传入其中包含密钥title的数据，有没有办法可以通过任意键传递来过滤？

这样我可以做到

return value.filter(item => item[myArbiraryKey].indexOf(args[0]) !== -1);

Answer 1

您可以为管道提供多个参数：

@Pipe({
  name: "searchByTitle"
})
export class myPipe {
  transform(value, args: any[]) {
    var field = args[0];
    return value.filter(item => item[field].indexOf(args[1]) !== -1);
  }
}

并以这种方式使用它：

<li *ngFor="#item of items | searchByTitle:title:searchText">
  <div>{{item.title}}</div>
</li>

如何使用Angular2传递有关如何在管道中过滤的元数据？

1 个答案: