Angular2帶對象的管道過濾器

Question

我希望能夠在輸入時輸入列表對象。但它不斷給我一個錯誤。
我認爲它必須與管道不能正確讀取值。

//our root app component 
import {Component, NgModule, Pipe, PipeTransform} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import {FormsModule} from '@angular/forms' 

@Pipe({ name: 'filter' }) 
export class FilterPipe implements PipeTransform { 
    public transform(values: any[], filter: string): any[] { 
    if (!values || !values.length) return []; 
    if (!filter) return values; 

    return values.filter(v => v.indexOf(filter) >= 0); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <input [(ngModel)]="filterString" /> 
     <div *ngFor="let d of (data | filter: filterString)"> 
     {{ d.id }} 
     </div> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    data = [{id: 1, leagueName: 'Recreation League' }, 
    {id: 2, leagueName: 'Recreation League' }, 
    {id: 3, leagueName: 'Recreation League' } 
    ]; 

    filterString = ''; 

    constructor() { 
    this.name = 'Angular2' 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule, FormsModule ], 
    declarations: [ App, FilterPipe ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

預先感謝您

Answer 1

這實在不是一個合適的使用角度管。我知道AngularJS（即Angular 1）有一個「過濾器過濾器」，但之前有過消化週期。

更好的方法是將該過濾移入組件中的方法。

Answer 2

經過大量的研究和挖掘代碼。這是我如何使它工作。問題是過濾器需要比較對象的值而不是對象。所以，基本上改變

return values.filter(v => v.indexOf(filter) >= 0); 

到

return values.filter(v => v.email.indexOf(filter) >= 0); 

這裏是最後的結果。

@Pipe({ name: 'filter' }) 
export class FilterPipe implements PipeTransform { 
    public transform(values: any[], filter: string): any[] { 
    if (!values || !values.length) return []; 
    if (!filter) return values; 
    // Filter items array, items which match will return true 
    return values.filter(v => v.email.toLowerCase().indexOf(filter.toLowerCase()) !== -1); 
    } 
}