角度2：私の<code>component.ts</code>で

Question

Angular2、入力テキストの変更上のテキストフィルタが、私は私のHTMLで_videos:Video[]

におけるビデオオブジェクトのリストと店をつかむ、私は、ビデオを表示する

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

今、ビデオをフィルタリングするために、htmlに検索入力フィールドを作成したいと考えています。私は、パイプを使用しようとしています：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 =''; 

、

<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を変更するスロットルでkeyupイベントを聞き取り、_videosの代わりに*ngForに使用しますか？

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

この質問はあなたを助けることができる：

• NgFor doesn't update data with Pipe in Angular2