Angular 2.0.0 final - 自定义管道过滤器 Returns [object Object]

Question

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

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

Answer 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 类型。）

查看 angular 管道指南了解更多信息：

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

Angular 2.0.0 final - 自定义管道过滤器 Returns [object Object]

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

angular2-pipe

angular