如何強制自定義過濾器管道在angular2中執行

Question

我在angular2自定義過濾中有一個問題。

這是我的情景：

我的頁面包含幾個自定義組件。其中之一是負責顯示在左側頁面的數據：（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> 

而且，過濾器由一個自定義篩選完成：

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

在主網頁，我送作爲組件A的輸入屬性的功能：

public filter = (element: MyBean) => { 
      return (element.email !== undefined); 

    } 

在加載頁面時，它的執行沒有任何問題。但我想單擊複選框多次更改過濾條件。 我知道這個事實，即純粹的過濾被執行，如果輸入值改變。 但我不知道，我的方案中的哪個輸入值應該更改爲強制過濾？

當我添加下面的複選框的onchange事件功能，沒有被過濾。

createFilterCondition = (searchCondition: string) => { 

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

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

感謝您的幫助（項目被綁定到我的組件顯示的數據）

Answer 1

有2種方式

使管道不純

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

的總排行ge是管道會經常執行（每次運行變化檢測）。您可以通過緩存結果進行優化，只在其中一個參數發生變化時執行過濾，但檢查數組是否被修改也不太便宜。

另一種方法是將其他參數傳遞給管道。如果該值或改變管道中的參數，角執行管再次

@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

感謝您的回覆。 它通過創建一個新的數組來解決。如果這不是一個好的過濾方法，請告訴我。

下面我介紹我做了什麼：

我通過創建另一個數組，而不是原來的處理它（名爲filteredArray）

，並保持過濾器的結果就可以了，因此，結合filterArray到我零件。我意識到數組上的過濾方法返回一個新的數組。所以把結果放在新變量中：

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

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