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.email.indexOf(filter) >= 0); 

に

return values.filter(v => v.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); 
    } 
}