Angular 2.0.0 final - Custom Pipe Filter Returns [object Object]

Question

Я пытаюсь создать фильтр с использованием настраиваемого канала. Может ли кто-нибудь помочь понять, почему фильтр не фильтрует макет данных? Он не бросает ошибку, она возвращает [объект Object]

Вы можете найти полный код здесь: http://run.plnkr.co/plunks/qwsk86hHLbI26w3HVMdV/

Answer 1

Вы видите «Отфильтровано: [объект Object]», поскольку значение listFilter на самом деле является объектом, а не строкой.

Вы связываете listFilter здесь:

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

При выборе пункта, listFilter будет установлено соответствующее значению foodTypes массива, который определяется в app.ts:

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

Так listFilter будет объект с ключами id и 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