javascript - 如何只影响 for 循环列表中的一项？

Question

我想操作使用 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;
}

Answer 1

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

这里有一个方法:

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>