时间戳

首页 > 解决方案 > 在“isOpenChange”事件中将图像添加到引导手风琴标题

javascript - 在“isOpenChange”事件中将图像添加到引导手风琴标题

问题描述

我有以下手风琴，我试图在单击时将图像添加到手风琴标题。现在，当我单击手风琴标题时，此图像将添加到列表中的所有标题中。我只想将图像添加到单击的标题中。谢谢是提前

<accordion-group class="container-fluid p-0 acc-group " (isOpenChange)="log($event, i)" [panelClass]="customClass " *ngFor="let header of data.meters;  index as i">
    <div class="row accordian-head" accordion-heading>
        <img *ngIf="accordianOpen" src="./../../../../assets/images/green-tick.svg">
        <span class="w-100">Header</span>
    </div>
    <div class="accordian-inner-content ">
       Content here
    </div>
</accordion-group>

log(event, i){
    if(event){
      this.accordianOpen = true;
    }else{
       this.accordianOpen = false;
    }
  }

标签： javascriptangularbootstrap-4accordion

解决方案

图像被添加到所有手风琴，因为单击时您正在设置accordianOpen=true，它满足所有图像标签的条件。

您可以创建一个变量并存储单击的索引。

log(event, i){
    if(event){
      this.accordianOpen = true;
      this.selectedIndex=i;
    }else{
       this.accordianOpen = false;
       this.selectedIndex=-1 //Reset the selectedIndex as per your requirement
    }
  }

并将条件更改如下：

<accordion-group class="container-fluid p-0 acc-group " (isOpenChange)="log($event, i)" [panelClass]="customClass " *ngFor="let header of data.meters;  index as i">
    <div class="row accordian-head" accordion-heading>
        <img *ngIf="accordianOpen && selectedIndex == i" src="./../../../../assets/images/green-tick.svg">
        <span class="w-100">Header</span>
    </div>
    <div class="accordian-inner-content ">
       Content here
    </div>
</accordion-group>

推荐阅读