각도 2.0.0 최종 - 사용자 지정 파이프 필터 반환 [object Object]

Question

사용자 지정 파이프를 사용하여 필터를 만들려고합니다. 필터가 모의 데이터를 필터링하지 않는 이유를 누구든지 쉽게 알아볼 수 있습니까? 당신은 여기에 전체 코드를 찾을 수 있습니다

그것은 오류가 발생하지 않습니다, 그것은 반환 [개체 개체] : http://run.plnkr.co/plunks/qwsk86hHLbI26w3HVMdV/

Answer 1

당신은보고있다가 "에 의해 필터링 : [개체 개체]"때문에 listFilter의 값 실제로는 문자열이 아니라 객체입니다.

현재 listFilter 바인딩 :

<select type="string" [(ngModel)]="listFilter" (ngModelChange)="showSelected()"> 
    <option *ngFor="let foodType of foodTypes" [ngValue]="foodType">{{foodType.name}}</option> 
</select> 

항목이 선택되면, listFilter는 app.ts에 정의 된 foodTypes 배열의 적절한 값으로 설정됩니다

foodTypes = [ 
    { id: 1, name: "Fruits" }, 
    { id: 2, name: "Spices" }, 
    { id: 3, name: "Vegetables" } 
]; 

그래서 listFilterid 및 name 키가있는 객체가됩니다. , 예컨대을 필터 이름을 표시하도록 템플릿의 name 속성을 사용하여 목록 자체가 필터링되지 않는 이유를 아직 제품 목록을 필터링하기 위해 아무것도하지 않는 관해서

<div *ngIf='listFilter'> 
    <h5>Filtered by: {{listFilter.name}} </h5> 
</div> 

합니다. 당신은 같은 것을 수행 할 수 있습니다 :

<tr *ngFor='let _product of (_products|productFilter:listFilter)'> 
    <td>{{ _product.id }}</td> 
    <td>{{ _product.prodName }}</td> 
</tr> 

을하고 적절하게 필터 자체를 구현 :

export class FilterPipe implements PipeTransform { 
    transform(value: IProduct[], filterObject: any): IProduct[] { 
     // your code here -- return the filtered list 
    } 
} 

을 (당신이 필터 객체의 인터페이스를 정의하는 경우, 당신은 대신에 여기를 사용할 수 있습니다 any 형) 추가 정보를 원하시면 파이프의 각도 가이드 밖으로

확인하십시오.

https://angular.io/docs/ts/latest/guide/pipes.html