除了通过索引之外，还有其他方法可以访问 *ngFor 项目吗答案

【问题标题】：Is there another way to access an *ngFor item other than by its index除了通过索引之外，还有其他方法可以访问 *ngFor 项目吗
【发布时间】：2017-05-09 14:52:42
【问题描述】：

我有一个*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 列表中的数据？

【问题讨论】：

标签： angular typescript ngfor

【解决方案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';
}

【讨论】：