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

Question

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

我正在为此使用 ngx-bootstrap 它有一个 "isOpenChange" 事件，当展开任何手风琴时都会触发该事件。在这里，我试图获得扩展的手风琴组的 event.target 。我正在使用以下代码在事件中滚动。

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

我已经尝试传递来自 "isOpenChange" 的事件，但它 returns 仅 true/false。由于事件总是 true/false，我遇到了以下问题。我可以使用点击功能传递它，但在我的情况下，当我点击外部或同一页面另一部分上的某个按钮时，手风琴应该打开。

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

<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 将 return 仅限布尔值。

您可以在 accordion-group 上添加索引来获取目标，

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

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

How do I get the target element event of accordion-group on isOpenChange is triggered

accordion

ngx-bootstrap

angular