javascript - 在ngFor中获取当前运行的元素

Question

图像列表在循环中执行(ngFor)。我试图通过调用函数 (click)="addStyle()"来获取当前被单击的元素。我在这里面临的问题是，如果我根据单击的方法添加样式 [class.active] ，它反射(reflect)在所有图像标签中。但我试图仅向被点击的特定图像添加样式。

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

组件.css

.active
{
 border:1px solid red;
 }

简而言之，我试图只为特定的图像标签添加样式，而不是循环中的所有图像

Answer 1

试试这个。

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