0

カスタム パイプを使用してフィルターを作成しようとしています。フィルタがモック データをフィルタリングしていない理由を確認できる人はいますか? エラーをスローせず、[object Object] を返します。

ここで完全なコードを見つけることができます: http://run.plnkr.co/plunks/qwsk86hHLbI26w3HVMdV/

4

1 に答える 1

4

listFilterの値は実際には文字列ではなくオブジェクトであるため、「Filtered by: [Object object]」が表示されます。

ここでバインドlistFilterします：

<select type="string" [(ngModel)]="listFilter" (ngModelChange)="showSelected()">
    <option *ngFor="let foodType of foodTypes" [ngValue]="foodType">{{foodType.name}}</option>
</select>

項目が選択されると、 で定義されている配列listFilterの適切な値に設定されます。foodTypesapp.ts

foodTypes = [
  { id: 1, name: "Fruits" },
  { id: 2, name: "Spices" },
  { id: 3, name: "Vegetables" }
];

そのため、キーとlistFilterを持つオブジェクトになります。テンプレートでプロパティを使用して、フィルター名を表示します。例:idnamename

<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 に答える