Получить текущий элемент, работающий в ngFor

Question

Список изображений выполняется в цикле (ngFor).Я пытаюсь получить текущий элемент, по которому щелкают, вызывая функцию (click) = "addStyle ()". Проблема, с которой я сталкиваюсь здесь, заключается в том, если я добавляю стиль [class.active] в зависимости от метода, по которому щелкнули, это отражается во всех тегах изображений. Но я пытаюсь добавить стиль только к конкретному изображению, по которому щелкаем.

component.html

<div class="item" *ngFor="let i of img;let i = index">
    <img class="product-i-2" [src]="i" [class.active]="isActive" (click)="addStyle()">
</div>

component.ts

 isActive:false;
 addStyle()
 {
  this.isActive=true;
 }

component.css

.active
{
 border:1px solid red;
 }

Короче, я пытаюсь добавить стиль только к конкретномутег изображения и не все изображения в цикле

Answer 1

вы можете попробовать вот так

HTML

<div class="item" *ngFor="let i of img;let j = index">
    <img class="product-i-2" [src]="i" [class.active]="isActive[i] == true ? 'active' : '' " (click)="addStyle(j)">
</div>

TS

isActive: any[] = false;
ngOnInit() {
// here we set defalut value to false
   for (let i = 0; i < img.length; i++) {
    this.isActive.push(false);
   }
}
 addStyle(j)
 {
  this.isActive[j]= !this.isActive[j];
 }

Answer 2

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

<div class="item" *ngFor="let i of img;let i = index">
    <img class="product-i-2" [src]="i" (click)="addStyle(e)">
</div>

// In TS file

addStyle(event)
{
  event.target.classList.add(className);
}

Answer 3

Попробуйте это.

<div class="item" *ngFor="let i of img;let i = index">
    <img class="product-i-2" [src]="i" [class.active]="i === activeIdx" 
(click)="addStyle(i)">
</div>

activeIdx: number;
addStyle(i)
{
  this.activeIdx = i;
}

Answer 4

не сохранять свойство isActive сохранить активное изображение, а затем вы можете проверить условие по ссылке

activeImg:any;

addStyle($event){
this.activeImg=$event;
}

<div class="item" *ngFor="let i of img;let i = index">
    <img class="product-i-2" [src]="i" [class.active]="activeImg==i" (click)="addStyle()">

Answer 5

Лучший способ - преобразовать массив изображений в массив объектов изображений и пометить как активный.

 ngOnInit(){
  this.img.forEach((img)=>{
  this.alter.push({src:img, isActive:false})
 })
}

 addAlterStyle(index){
   this.alter.forEach((img) => img.isActive = false);
   this.alter[index].isActive = true;
 }

HTML

<div class="item" *ngFor="let image of alter;let i = index">
    <img class="product-i-2" [ngClass]="{'isActive':image.isActive}" [src]="image.src" (click)="addAlterStyle(i)">
</div>

ЕслиВы не хотите изменять структуру массива img

TS

addStyle(event){
    let imageTags = document.querySelectorAll('.image');
    imageTags.forEach((element)=>{
      element.classList.remove('isActive')
    })
    event.target.classList.add('isActive')
  }

HTML

<div class="item" *ngFor="let image of img;let i = index">
    <img class="product-i-2 image" [src]="image" (click)="addStyle($event)">
</div>

Вот рабочая демонстрация стекаблиц