Angular 2.0.0 final - 自定义管道过滤器返回 [object Object]答案

【问题标题】：Angular 2.0.0 final - Custom Pipe Filter Returns [object Object]Angular 2.0.0 final - 自定义管道过滤器返回 [object Object]
【发布时间】：2016-09-18 22:27:45
【问题描述】：

我正在尝试使用自定义管道创建过滤器。谁能帮忙看看为什么过滤器不过滤模拟数据？它不会抛出错误，它会返回 [object Object]

您可以在此处找到完整的代码： http://run.plnkr.co/plunks/qwsk86hHLbI26w3HVMdV/

【问题讨论】：

{{listFilter.name}} simple ;)

标签： angular angular2-pipe

【解决方案1】：

您会看到“Filtered by: [Object 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类型。）

【讨论】：

谢谢，这真的很容易！ :) 这会按预期将所选选项打印到视图中，但是过滤似乎不起作用，也没有错误……谁能告诉我我在这里遗漏了什么？
你看我回答的后半部分了吗？您需要使用 | 运算符将管道应用到您的元素，它们会为您的管道提供一些适当的实现来实际过滤元素。