Angular2パイプはフィルタリングしますが、まったく表示されません

Question

私はこの回答のコードを使用していますAngular 2 - ngFor index after a pipe、 しかし、私の問題は実際にはフィルタリングされた項目を取得していますが、いくつかの空のdiv。 アイテムの1つを選択すると、選択したアイテムのすべての詳細が別のdivに表示されます。

私のパイプコード：

@Pipe({ 
    name: 'appFilter', 
    pure: false 
}) 

export class AppFilterPipe implements PipeTransform { 
    transform(values: any[], arg1: any, arg2: any): any { 

    return values.reduce((acc, value, index) => 
     value[arg1] == arg2 ? [...acc, { index, value }] : acc, []); 
    } 
} 

オブジェクトを濾過ますHTML：

<div (click)="showComentario(fc.index);" 
     class="comentario" 
     *ngFor="let fc of comentarios | appFilter:'fav':1"> 
    {{fc.comment}} 
    <div [ngClass]="setCss(fc.sentimient)"></div> 
</div> 

私は、フィルタリング項目のテキストを見ることができないということが起こっていますか？

Answer 1

は、あなたがにインデックスを追加している新しく作成されたオブジェクトを使ってコメントにアクセスする必要があります：あなたのパイプで

{{ fc.value.comment }}

あなたは純粋なフィルタを行っていません。パイプに入るものは、出てくるものと全く同じものではありません。

あなたはこのようになりますオブジェクト回っているので、これがある：パイプの後、この中へ

{ 
    fav: '1', 
    comment: 'abc' 
} 

を：

{ 
    index: 0, 
    value: { 
    fav: '1', 
    comment: 'abc' 
    } 
} 

別のオプション

あなたの場合は本当にインデックスの値を保持したいが、追加の深さを必要としない場合は、0を使用することができますあなたのパイプで

[...acc, { index, ...value }] 

これはあなたのための平らなオブジェクトを作成しますが、それはまだのECMAScriptの最新バージョンではありません。