1

Angular2，在我的 Angular2 中component.ts，我获取了一个视频对象列表并存储在_videos:Video[]

在我的 html 中，我显示视频，

<tr *ngFor="#video of _videos">

现在我想在 html 中创建一个搜索输入字段来过滤视频。我正在尝试使用管道：

import {Pipe,PipeTransform} from 'angular2/core';

@Pipe({
  name: 'textfilter'
})

export class TextFilterPipe implements PipeTransform {
  transform(items: any[], args: any[]): any {
    if(args[1].toString().length === 0)
      return items;
    return items.filter(item => item[args[0]].indexOf(args[1]) !== -1);
  }
}

在ts,

private _videoTitleFilter: string ='';

在html,

  <tr>
    <th><input id="videoTitleFilter" placeholder="Filter">{{_videoTitleFilter}}</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr *ngFor="#video of _videos |textfilter:'title':_videoTitleFilter">

绑定似乎不起作用。管道第一次工作。在这里使用管道是否正确？或者我应该创建一个新数组_videoList: Video[]，用油门监听 keyup 事件来更改_videoList并使用它*ngFor，而不是_videos？

4

1 回答 1

4

你可以让你的管道不纯净：

@Pipe({
  name: 'textfilter',
  pure: false
})
export class TextFilterPipe implements PipeTransform {
  transform(items: any[], args: any[]): any {
    if(args[1].toString().length === 0)
      return items;
    return items.filter(item => item[args[0]].indexOf(args[1]) !== -1);
  }
}

这个问题可以帮助你：

于 2016-05-11T09:12:10.353 回答