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

正在循环中执行的映像列表（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.css

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

.active
{
 border:1px solid red;
 }

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

试试这个

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

activeIdx：数字；
addStyle（一）
{
this.activeIdx=i；
}

试试这个

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

activeIdx：数字；
addStyle（一）
{
this.activeIdx=i；
}

你可以这样试试

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>

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

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

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

isActive:any[]=false；
恩戈尼尼特（）{
//这里我们将defalut值设置为false
for（设i=0；i

你可以这样试试

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>

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

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

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

isActive:any[]=false；
恩戈尼尼特（）{
//这里我们将defalut值设置为false
for（设i=0；i

您可以在单击时传递事件参数，这样您将获得元素，然后可以向其中添加类

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

//在TS文件中
addStyle（事件）
{
event.target.classList.add（className）；
}

您可以在单击时传递事件参数，这样您将获得元素，然后可以向其中添加类

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

//在TS文件中
addStyle（事件）
{
event.target.classList.add（className）；
}

最好的方法是将图像数组转换为图像对象数组，并将其标记为活动

 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 i of img;let j = index">
    <img class="product-i-2" [src]="i" [class.active]="isActive[i] == true ? 'active' : '' " (click)="addStyle(j)">
</div>

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

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

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>

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

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

---

最好的方法是将图像数组转换为图像对象数组，并将其标记为活动

 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 i of img;let j = index">
    <img class="product-i-2" [src]="i" [class.active]="isActive[i] == true ? 'active' : '' " (click)="addStyle(j)">
</div>

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

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

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>

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

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

---

不保存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()">

activeImg:any；
addStyle（$event）{
this.activeImg=$event；
}

---

不保存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()">

activeImg:any；
addStyle（$event）{
this.activeImg=$event；
}

---

（单击）=“addStyle（i）”

将i添加到addStyle，并且

class.active

应该是

img.active

。将

let i=index

重命名为

let\u i=index

，以避免与已声明的变量

i

冲突。更改

addStyle

以将

i.isActive

设置为

！i、 isActive

。感谢您的帮助。但我仍在尝试仅为正在单击的特定元素添加样式。这将完成此操作。您只需禁用其他元素上的样式。

（单击）=“addStyle（i）”

将i添加到addStyle，并且

class.active

应为

img.active

。将

let i=index

重命名为

let\u i=index

，以避免与已声明的变量

i

冲突。更改

addStyle

以将

i.isActive

设置为

！i、 isActive

。感谢您的帮助。但我仍在尝试仅为正在单击的特定元素添加样式。这将完成此操作。您只需要禁用其他元素上的样式。