Javascript 如何仅影响for循环列表中的一项？

我想操作使用for循环（

ngFor

）生成的列表中的项目。但现在如果我想换一件，它会改变我所有的物品。我怎么能只穿一件衣服，让一件衣服的颜色和图标发生变化

html

---

您必须跟踪循环中每个项目的

添加状态

以下是一种方法：

loadedFriendsMap:{[k:string]：boolean}={}；
/* ... */
onAdd（friendId）{
this.loadedFriendsMap[friendId]=true；
}
removeFriend（friendId）{
this.loadedFriendsMap[friendId]=false；
}
/* ... */


朋友
状态
您必须跟踪循环中每个项目的
添加状态

以下是一种方法：

loadedFriendsMap:{[k:string]：boolean}={}；
/* ... */
onAdd（friendId）{
this.loadedFriendsMap[friendId]=true；
}
removeFriend（friendId）{
this.loadedFriendsMap[friendId]=false；
}
/* ... */


朋友
状态
这是因为添加的变量是一种全局变量，没有绑定到任何对象。解决此问题的另一种方法是，将此变量/属性添加到所有对象

for(i = 0; i < loadedFriends.length; i++){
    loadedFriends[i].added = false;
}

我觉得这种方法更好，因为属性绑定到对象本身，这比维护单独的数组/哈希映射提供了更多的控制。
这是因为添加的变量是一种全局变量，不绑定到任何对象。解决此问题的另一种方法是，将此变量/属性添加到所有对象

for(i = 0; i < loadedFriends.length; i++){
    loadedFriends[i].added = false;
}

我觉得这种方法更好，因为属性绑定到对象本身，这比维护单独的数组/哈希映射提供了更多的控制。
如果希望一次只选择一个，则需要获取添加的索引并将其存储在变量中

例如

Html



如果希望一次只选择一个，则需要获取添加的索引并将其存储在变量中

例如

Html



loadedFriendsMap:{[k:id]：boolean}={}
这给了我一个错误：找不到
id
，索引签名参数类型必须是
string
或
number
@ColinRagnarök类型对不起！它应该是
字符串
。我已经更新了我的答案。现在可以添加它了，这样图标就变成了复选标记，但是我不能再把它改回带有主色的加号图标了。我把它改成：
onAdd（friendId）{this.loadedFriendsMap[friendId]=！this.loadedFriendsMap[friendId]；}
现在我可以把它改回
loadedFriendsMap:{[k:id]：boolean}={}
这给了我一个错误：找不到
id
，索引签名参数类型必须是
string
或
number
@ColinRagnarök类型对不起！它应该是
字符串
。我已经更新了我的答案。现在可以添加它了，这样图标就变成了复选标记，但是我不能再把它改回带有主色的加号图标了。我把它改成：
onAdd（friendId）{this.loadedFriendsMap[friendId]=！this.loadedFriendsMap[friendId]；}
现在我可以把它改回来了！但是，通过使用这个，你只能增加一个朋友，对吗？@AndreiGătej是的，我在回答中提到过，他的要求也是一样的。很好的方法！但是，通过使用这个，你只能增加一个朋友，对吗？@AndreiGătej是的，我在回答中提到过，他的要求也是一样的。
for(i = 0; i < loadedFriends.length; i++){
    loadedFriends[i].added = false;
}

onAdd(friendObj): void {
    friendObj.added = !friendObj.added;
}

      <ion-label text-wrap>
              <h2 class="title">Friend</h2>
              <p class="status"> Status</p> 
            </ion-label>
            <ion-buttons>
                <ion-button size="large" (click)="removeFriend(i)" (click)="onAdd(i)" slot="icon-only">
                <ion-icon [color]="(addedIndex === i)  ? 'primary' : 'light'" [name]="(addedIndex === i) ? 'add-circle-outline' : 'checkmark-circle-outline'"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
    </ion-list>

public addedIndex: boolean = true;

...

onAdd(id: number): void {
  this.addedIndex = id;
}