角度2.0.0 final - カスタムパイプフィルターが返されます。[オブジェクトオブジェクト]

Question

カスタムパイプを使用してフィルターを作成しようとしています。 誰でもフィルタがモックデータをフィルタリングしていない理由を確認できますか？あなたがここに完全なコードを見つけることができます

それはエラーをスローしません、それは返す[オブジェクトのオブジェクト]： http://run.plnkr.co/plunks/qwsk86hHLbI26w3HVMdV/

Answer 1

あなたが見ているが、「フィルタ条件：[Objectオブジェクト]」ためlistFilterの値実際には文字列ではなくオブジェクトです。

あなたはここにlistFilterバインド：

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

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

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