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

Question

Consider the following

Here is my component

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

Here is my pipe

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

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

As we can see from the above code we are filtering the list using user inputted searchText , the searchText is the filter criteria for the title.

However if I have the following data

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

it would not work, I can only pass in data that have the key title in it, is there a way I can pass in an arbitrary key to filter by?

Such that I can do

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

Answer 1

You could provide several parameters to your pipe:

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

and use it this way:

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