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

【问题标题】：Get the current element running in ngFor获取当前在 ngFor 中运行的元素
【发布时间】：2019-05-09 17:30:09
【问题描述】：

图像列表在循环中执行（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;
 }

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

【问题讨论】：

(click)="addStyle(i)" 将 i 添加到 addStyle，class.active 应为 img.active。将let i = index 重命名为let _i = index 以避免与已经声明的变量i 发生冲突。更改 addStyle 以将 i.isActive 设置为 !i.isActive。
感谢您的帮助..但我仍在尝试仅向被单击的特定元素添加样式
这样就可以了。您只需要禁用其他元素的样式。

标签： javascript jquery css angular

【解决方案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;
}

【讨论】：

【解决方案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];
 }

【讨论】：

【解决方案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);
}

【讨论】：

【解决方案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

【讨论】：

【解决方案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()">

【讨论】：