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