除了通过其索引之外，还有另一种访问 *ngFor 项目的方法吗

Question

我有一个 *ngFor 食品列表 (foods)，当用户将鼠标悬停在元素上时会执行动画

<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';
}

除了通过其索引之外，还有另一种访问 *ngFor 项目的方法吗

Is there another way to access an *ngFor item other than by its index

typescript

ngfor

angular