0

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

你可以在这里找到完整的代码： http ://run.plnkr.co/plunks/qwsk86hHLbI26w3HVMdV/

4

1 回答 1

4

您会看到“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>

When an item is selected, listFilterwill be set to the appropriate value of the foodTypesarray, which is defined in 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

于 2016-09-18T23:04:26.770 回答