Angular 2.0.0 final - пользовательский фильтр труб возвращает [объект]

Question

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

Вы можете найти полный код здесь: 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 будет установлено соответствующее значение 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