Question

我尝试使用自定义管道创建过滤器。任何人都可以帮忙看看过滤器为什么不过滤模拟数据？它不会抛出错误，它会返回[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类型。）

查看管道上的角度指南以获取更多信息：

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

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

1 个答案: