角度2のフィルタパイプ

Question

カスタムパイプを作成していくつかの項目を隠そうとしています。

import { Pipe } from '@angular/core'; 

// Tell Angular2 we're creating a Pipe with TypeScript decorators 
@Pipe({ 
    name: 'showfilter' 
}) 

export class ShowPipe { 
    transform(value) { 
     return value.filter(item => { 
      return item.visible == true; 
     }); 
    } 
} 

HTML

<flights *ngFor="let item of items | showfilter"> 
</flights> 

COMPONENT

import { ShowPipe } from '../pipes/show.pipe'; 

@Component({ 
    selector: 'results', 
    templateUrl: 'app/templates/results.html', 
    pipes: [PaginatePipe, ShowPipe] 
}) 

は私の項目は、真または偽とすることができる、目に見える性質を有しています。

何も表示されませんが、私のパイプに何か問題がありますか？

私は、私はパイプコードを変更したときので、私のパイプが機能していると思う：

import { Pipe } from '@angular/core'; 

// Tell Angular2 we're creating a Pipe with TypeScript decorators 
@Pipe({ 
    name: 'showfilter' 
}) 

export class ShowPipe { 
    transform(value) { 
     return value; 
    } 
} 

これは、すべての項目が表示されます。

おかげ

Answer 1

私はあなたがitemsため[]の初期値を持っているので、これはかなり確信しています。その後、後でitemsに項目を追加すると、パイプは再実行されません。

pure: falseを追加すると、それを修正する必要があります

@Pipe({ 
    name: 'showfilter', 
    pure: false 
}) 
export class ShowPipe { 
    transform(value) { 
     return value.filter(item => { 
      return item.visible == true; 
     }); 
    } 
} 

pure: falseは大きなパフォーマンスへの影響を持っています。このようなパイプは、変更検出が実行されるたびに呼び出されます。これはかなり頻繁に行われます。

純粋なパイプを呼び出す方法は、実際に入力値を変更することです。

あなたは

this.items = this.items.slice(); // create a copy of the array 

にitemsが変更された後、すべての時間を行う場合（追加/削除）は角度が変更を認識し、パイプを再実行します。