1

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[]スロットルでキーアップ イベントをリッスンして変更し、代わりに で_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 に答える