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

尝试这个。

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

您可以尝试这样

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 3

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

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

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

 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>

Here is the stackblitz working demo

Answer 5

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

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

5 个答案: