Angular中*ngFor遍历数组时获取选中对象索引的问题

嘿，我懂你现在卡在哪了——用*ngFor循环渲染信息流，结果点收藏按钮只能加第一个状态，没法精准定位到用户点的那一条是吧？其实不用费劲写循环找索引，直接在模板里把当前的状态项或者索引传给函数就搞定了，这是最直接高效的办法！

方案一：直接传递当前状态项（推荐） #

这是最直观的方式，在*ngFor循环里直接把当前遍历到的feed对象传给收藏函数，不用再手动找索引。

1. 修改模板代码

在循环时同时拿到当前的状态项，绑定点击事件时把它传进去：

<!-- 假设你的信息流容器是这样的 -->
<div *ngFor="let feedItem of users[0].feed" class="status-item">
  <p>{{ feedItem.description }}</p>
  <span>发布者：{{ users[0].username }}</span>
  <!-- 点赞按钮 -->
  <button>点赞</button>
  <!-- 收藏按钮：把当前feedItem传给函数 -->
  <button (click)="addToFavorites(feedItem)">收藏</button>
</div>

2. 修改addToFavorites函数

直接使用传入的feedItem对象获取描述：

// 最好给feedItem定义对应的类型，比如 interface Status { description: string; ... }
addToFavorites(feedItem: any) {
  const targetDesc = feedItem.description;
  console.log('Adding to Favorites ' + targetDesc);
  
  this.favorite = this.favoritesprovider.addFavorites(targetDesc);
  
  this.toastCtrl.create({
    message: `${targetDesc} has been added to your favorites!`,
    duration: 3000
  }).present();
}

方案二：传递索引（备选） #

如果你更习惯用索引操作，也可以在*ngFor里拿到当前项的索引，把索引传给函数：

1. 修改模板代码

<div *ngFor="let feedItem of users[0].feed; let i = index" class="status-item">
  <!-- 其他内容不变 -->
  <button (click)="addToFavorites(i)">收藏</button>
</div>

2. 修改addToFavorites函数

通过索引获取对应的状态描述：

addToFavorites(index: number) {
  const targetDesc = this.users[0].feed[index].description;
  console.log('Adding to Favorites ' + targetDesc);
  
  this.favorite = this.favoritesprovider.addFavorites(targetDesc);
  
  this.toastCtrl.create({
    message: `${targetDesc} has been added to your favorites!`,
    duration: 3000
  }).present();
}

如果你坚持要用findWithAttr函数（不推荐，多此一举） #

如果一定要用你找到的索引查找函数，也可以整合进代码，但其实完全没必要——毕竟我们已经能直接拿到目标项了。不过还是给你参考：

1. 把查找函数变成组件方法

findWithAttr(array: any[], attr: string, value: any): number {
  for(let i = 0; i < array.length; i += 1) {
    if(array[i][attr] === value) {
      return i;
    }
  }
  return -1;
}

2. 模板传递描述，函数内查找索引

<button (click)="addToFavorites(feedItem.description)">收藏</button>

3. 修改收藏函数

addToFavorites(description: string) {
  const index = this.findWithAttr(this.users[0].feed, 'description', description);
  if (index === -1) {
    console.log('目标状态未找到');
    return;
  }
  
  const targetDesc = this.users[0].feed[index].description;
  console.log('Adding to Favorites ' + targetDesc);
  
  this.favorite = this.favoritesprovider.addFavorites(targetDesc);
  
  this.toastCtrl.create({
    message: `${targetDesc} has been added to your favorites!`,
    duration: 3000
  }).present();
}

总的来说，前两种方案都比手动查找索引要简洁可靠，优先推荐直接传递状态项的方式，减少不必要的代码逻辑~

内容的提问来源于stack exchange，提问作者Logan Musselman