Как повлиять только на один элемент в списке цикла?

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>

ts

  public added: boolean = true;

...

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

Answer 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>

Answer 2

Вам нужно получить добавленный индекс и сохранить его в переменной, если вы хотите выбирать только один раз.

напр.

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>

ts

public addedIndex: boolean = true;

...

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

Answer 3

Это потому, что добавленная переменная является глобальной и не привязана ни к какому объекту.Еще один способ исправить это - добавить эту переменную / атрибут ко всем объектам.

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

Мне кажется, что этот подход лучше, так как атрибут привязан к самому объекту, который дает вамбольше контроля, чем поддержка отдельного массива / хэш-карты.