Angular 2：输入文本更改时的文本过滤器

Question

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[]，用 throttle 监听 keyup 事件来改变 _videoList 并在 *ngFor 中使用它而不是 _videos ？

Answer 1

你可以让你的烟斗不纯净：

@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);
  }
}

这个问题可以帮助到你：

Angular 2：输入文本更改时的文本过滤器

Angular 2: text filter on input text change

angular2-pipe

angular