是否有另一種方式，通過它的索引

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列表中的數據？

Answer 1

您可以通過食物本身，而不是僅僅是指數：

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

和改變啓閉方法，以及：

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