は、アニメーションを実行し、そのインデックス

Question

による以外* ngFor項目にアクセスするが、別の方法で私は食料品（foods）の*ngForリストを持っている要素を介してユーザマウスを置い

<div [@foodState]="food.state" *ngFor="let food of foods; trackBy let i=index" (mouseenter)="open(i)" (mouseleave)="close(i)"> 

open()ですし、 close()方法は、要素のプロパティは、新しいアニメーションの状態をトリガーstate

open(i: number): void{ 
    this.foods[i].state = 'open'; 
} 

と呼ば変える

animations: [ 
    trigger('foodState', [ 
    state('closed', style({ 
     height: '36px' 
    })), 
    state('open', style({ 
     height: '58px' 
    })), 
    ]) 
] 

私が直面してる問題は、私は検索用語に基づいてデータをフィルタリングする @Pipeを追加したいということです

：

：

<div [@foodState]="food.state" *ngFor="let food of foods| searchPipe: searchTerm; trackBy let i=index" (mouseenter)="open(i)" (mouseleave)="close(i)"> 

@Pipeがfilter()機能を使用してfoodsリストを変換

transform(foods: any[], searchTerm: string): any[] { 
    foods = foods.filter(food => food.name.toUpperCase().indexOf(searchTerm.toUpperCase()) !== -1); 
    return foods; 
} 

ので、今、ユーザがホバリングしますその上に食べ物のインデックスは、もは​​やfoodsリストに正しい食品に対応していません。

元の配列インデックスからアクセスすることなく、繰り返しアイテムの状態をトリガーする方法はありますか？それとも私が*ngForリストにアクセスするデータにアプローチすべきもう一つの方法は何ですか？

<div [@foodState]="food.state" *ngFor="let food of foods; trackBy let i=index" (mouseenter)="open(food)" (mouseleave)="close(food)"> 

をし、同様に開閉方法を変更します：

Answer 1

あなただけのインデックスの代わりに食品自体を渡すことができ

open(food: any): void{ 
    food.state = 'open'; 
}