Как переключить статус в Angular

Question

У меня есть варианты выбора, которые мне нужно выбрать за раз и установить active значение выбранного элемента на true

Пока я могу это сделать, но проблема:

Когда я изменяю выбранную опцию, первая опция active не будет установлена ​​на false

Снимок экрана

код

HTML

<ion-row>
    <ion-col *ngFor="let imf of allImages" size="4">
      <img [id]="imf.id" (click)="getName(imf)" [src]="imf.src" [alt]="imf.id">
    </ion-col>
</ion-row>

Component

allImages = [{
    'src' : '../../../assets/bgs/01.png',
    'id'  : '01',
    'name':  '01.png',
    'active': false,
},
{ 
  //and so on...
}];

getName(data) {
    // add class to selected option
    var titleELe = document.getElementById(data.id);
    titleELe.classList.add('active');

    // set active value of selected option to "true"
    let index = this.allImages.indexOf(data.id);
    data.active = true;
    this.allImages[index] = data;

    // issues:
    // remove added class from old item
    // remove "true" from old item
}

Что мне нужно

1. удалить добавленный класс из старого item
2. удалить «true» из старого элемента

Есть идеи?

Answer 1

Попробуйте использовать ngClass для установки класса 'active'

HTML

<ion-col *ngFor="let imf of allImages;let i=index" size="4">
      <img [id]="imf.id" [ngClass]="{'active':currentItemIndex == i}"  
(click)="setActiveItemIndex(i)" [src]="imf.src" [alt]="imf.id">
        </ion-col>

TS:

//property
currentItemIndex=0;

setActiveItemIndex(i){
   currentItemIndex=i;
}

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

const activeImage=this.allImages[currentItemIndex]

Answer 2

Решено

вот мое последнее обновление, которое устранило мои проблемы

getName(data) {
    const items = this.allImages.filter((item) => { // loop all items
      if(item.active == true) { // if any of them is set active to true
        item.active = false; // set it to flase
        var titleELe = document.getElementById(item.id);
        titleELe.classList.remove('active'); // and remove the class of it
      }
    });

    var titleELe = document.getElementById(data.id);
    titleELe.classList.add('active'); // add class to new selected item

    const index = this.allImages.indexOf(data.id);
    data.active = true; // set newly selected item active to true
    this.allImages[index] = data;
}

Надеюсь, это поможет и другим.