如何只影响for循环列表中的一项？答案

【问题标题】：How to only affect one item in a for-loop list?如何只影响for循环列表中的一项？
【发布时间】：2019-09-21 21:53:27
【问题描述】：

我想操作使用 for 循环 (ngFor) 生成的列表中的项目。但目前，如果我想换一件，它会改变我所有的物品。怎么才能只穿一件单品，让一件单品的颜色和图标发生变化？

html

<ion-list>
 <ion-item *ngFor="let friend of loadedFriends; let i = index">


          <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]="added ? 'primary' : 'light'" [name]="added ? 'add-circle-outline' : 'checkmark-circle-outline'"></ion-icon>
                  </ion-button>
                </ion-buttons>
              </ion-item>
        </ion-list>

  public added: boolean = true;

...

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

【问题讨论】：

标签： javascript html angular typescript ionic-framework

【解决方案1】：

您必须跟踪循环中每个项目的added 状态。

这是一种方法：

loadedFriendsMap: { [k: string]: boolean } = {};

/* ... */

onAdd (friendId) {
 this.loadedFriendsMap[friendId] = true;
}

removeFriend (friendId) {
 this.loadedFriendsMap[friendId] = false;
}

/* ... */

<ion-list>
    <ion-item *ngFor="let friend of loadedFriends; let i = index">
        <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]="loadedFriendsMap[i] ? 'primary' : 'light'" [name]="loadedFriendsMap[i] ? 'add-circle-outline' : 'checkmark-circle-outline'"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-item>
<ion-list>

【讨论】：

loadedFriendsMap: { [k: id]: boolean } = {}; 这给了我一个错误：未找到 id 并且索引签名参数类型必须是 string 类型或 number 类型
@ColinRagnarök 抱歉！应该是string。我已经更新了我的答案。
它现在可以添加它，以便图标变为复选标记，但我不能再将它改回原色的加号图标
我改成了：onAdd (friendId) { this.loadedFriendsMap[friendId] = !this.loadedFriendsMap[friendId]; } 现在我可以改回来了

【解决方案2】：

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

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

onAdd 方法如下所示。在 HTML 中，onAdd 方法将像这样传递：onAdd(friend) 而不是 onAdd(i)。

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

我觉得这种方法更好，因为属性与对象本身相关联，这比维护单独的数组/哈希映射给您更多的控制权。

【讨论】：

【解决方案3】：

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

例如。

HTML

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

【讨论】：

不错的方法！但是，通过使用它，您只能添加一个朋友，对吧？
@AndreiGătej 是的，我在回答中提到过，他的要求也是一样的。