如何在 isOpenChange 上触发手风琴组的目标元素事件

Question

当我单击按钮并将打开的手风琴滚动到视图顶部时，我想展开手风琴（可折叠）。

我为此使用 ngx-bootstrap，它有一个“isOpenChange”事件，当任何手风琴展开时触发。在这里，我试图获取展开的手风琴组的 event.target。我正在使用下面的代码来滚动事件。

event.target.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});

我尝试从“isOpenChange”传递事件，但它只返回真/假。由于事件始终为真/假，因此我遇到了以下问题。我可以使用点击功能传递它，但在我的情况下，当我点击外部或同一页面另一部分的某个按钮时，手风琴应该打开。

我希望能够跟踪元素的目标事件。

<accordion [closeOthers]="true" [isAnimated]="true">
<div class="listitem" *ngFor="let equipment of equipments">
  <accordion-group #group (isOpenChange)="equipmentOpened(equipment, $event)" [class.active]="equipment.active" [isOpen]="equipment.active">
    <accordion-heading accordion-heading>
      <span class="icon icon-{{ equipment.icon }} smallIcon"></span>
      <div class="arrowdown icon-backward-arrow"></div>
      <div class="accordionText">
          <span>{{ equipment.description }}</span>
          <span class="subtitle">Asset Id:<span class="listanswer">{{equipment.id }}</span></span>
      </div>
    </accordion-heading>
    <div class="information-list" *ngIf="group.isOpen">
      <ul>
        <li class="listtitle">
          Asset type
          <div class="listanswer">{{equipment.type}}</div>
        </li>
        <li class="listtitle" *ngIf="equipment.batteryLevel != null">
          Battery Level Sensor
          <div class="listanswer">{{equipment.getBatteryPercentage()}}%</div>
        </li>
        <li class="listtitle" *ngIf="!isNumber(equipment.getTemperature())">
          Temperature
          <div class="listanswer">{{equipment.getTemperature()}}&#176;C</div>
        </li>
      </ul>
      <ul>
        <li class="listtitle">
          Last Seen (UTC timezone)
          <div class="listanswer">{{equipment.getLastSeenDate() }}</div>
        </li>
        <li class="listtitle">
          Owner
          <div class="listanswer">{{equipment.owner}}</div>
        </li>
        <!-- <li class="listtitle">
          Distance
          <div class="listanswer">{{equipment.owner}} meters</div>
        </li> -->
      </ul>
      <button (click)="showMap()" class="closeAndShowButton">Show on map</button>
    </div>

  </accordion-group>
</div>

Answer 1

根据 ngx-bootstrap 中的代码，

@Output() isOpenChange: EventEmitter<boolean> = new EventEmitter();

isOpenChange 将只返回布尔值。

您可以在手风琴组上添加索引以获取目标，

<div class="listitem" *ngFor="let equipment of equipments;let i=index;">
  <accordion-group #group (isOpenChange)="equipmentOpened(equipment, $event,i)" [class.active]="equipment.active" [isOpen]="equipment.active" id="accordion-group-{{i}}">

获取手风琴ID，

isOpenChange(equipment:any,isOpen:boolean,i:number)
{
console.log("clicked accordion = >"+"accordion-group-"+i);
}