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

【问题标题】：Add image to bootstrap accordion header on 'isOpenChange' event在“isOpenChange”事件中将图像添加到引导手风琴标题
【发布时间】：2020-12-11 06:53:22
【问题描述】：

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

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

【问题讨论】：

请在代码沙箱中创建您的问题的演示，以便我们轻松修改您的代码并解决您的问题

标签： javascript angular bootstrap-4 accordion

【解决方案1】：

图像被添加到所有accordian，因为点击时您设置了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>

【讨论】：