angle2でカスタムフィルターパイプを実行する方法

Question

angular2のカスタムフィルターで質問があります。

これは私のシナリオです：

マイページには、いくつかのカスタムコンポーネントが含まれています。 、私が送っ

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



@Pipe({ name: 'filter' }) 

export class FilterPipe implements PipeTransform { 
    transform(values: any[], filter: any): any { 
     if (typeof filter !== "function") return values; 
      return values.filter((elem) => { 
      return filter(elem); 
     }); 
    } 
} 

メインページでは、（componentA）

<md-list-item *ngFor="let item of items | filter : filter | sort: sort; let i = index" " > 
     <template [render]="itemTemplateRef" [context.item]="item" 
     [context.index]="index"></template> 
    </md-list-item> 

も、フィルタはカスタムフィルタリングによって行われます。そのうちの一つは、ページの左側にあるデータを示す責任がありますコンポーネントAへの入力属性としての機能：ページの読み込み時に問題なく実行されます。チェックボックスをクリックしてフィルター条件を何度か変更したいのですが。 私は、入力値が変わると、純粋なフィルタリングが実行されるということを知っています。 しかし、自分のシナリオの入力値を強制的にフィルタリングするように変更する必要があるかどうかわかりません。

私は、チェックボックスのOnChangeイベントに以下の機能を追加したときに、何を濾過されていない。（項目は私のコンポーネント示すデータにバインドされた）任意のヘルプ

Answer 1

ため

createFilterCondition = (searchCondition: string) => { 

     items.filter((element) => { 
      return this.doFilter(elem); 
     }); 
    } 
    public doFilter= (element: MessagesBean) => { 

     return (element.email !== undefined); 
    } 

おかげで2通りの方法があります

パイプ不純

@Pipe({ name: 'filter', pure: false }) 

にdisadvantaを作りますパイプが非常に頻繁に実行されることです（変更検出が実行されるたびに）。結果をキャッシュすることによって最適化することができ、パラメータの1つが変更されたときにのみフィルタリングを行いますが、配列が変更されたかどうかをチェックすることはあまり安価ではありません。

もう1つの方法は、追加のパラメータをパイプに渡すことです。値または変更されたパイプのパラメータは、角パイプを実行した場合、再び

@Pipe({ name: 'filter' }) 

export class FilterPipe implements PipeTransform { 
    transform(values: any[], filter: any, changeIndicator: number): any { 
     if (typeof filter !== "function") return values; 
      return values.filter((elem) => { 
      return filter(elem); 
     }); 
    } 
} 

わけではありませんあなただけの角度で再びパイプを実行させるためのコンポーネントでchangeIndicatorをインクリメントする必要があります次の変更検出実行。

Answer 2

お返事ありがとうございます。 新しい配列を作成することで解決します。これがフィルタリングには適していない場合は、お知らせください。

私は私が何をしたかについて説明し、次のとおりです。結果的に、私にfilterArrayを結合し、

（filteredArrayという名前の）私が代わりに、元の1の別の配列を作成することによって、それを処理し

、その上にフィルタの結果を保ちます。成分。私は配列のフィルタメソッドが新しい配列を返すことに気づいた。その結果を新しい変数に入れます：

this.filteredArray = this.records.filter((element) => { 
      return this.filterSms(element); 
     }); 

public filterSms = (element: MessagesBean) => { 
      return (element.mobile !== undefined); 
}