Как мне получить событие целевого элемента accordion-group на isOpenChange, запущенное - PullRequest
Новая
       18

Как мне получить событие целевого элемента accordion-group на isOpenChange, запущенное

0 голосов
/ 17 мая 2019

Ну, я хочу развернуть гармошку (складную), когда я нажимаю на кнопку и прокручиваю открытую гармошку к вершине вида.

Я использую ngx-bootstrap, для этого у него есть событие «isOpenChange», которое срабатывает при раскрытии любого аккордеона. Здесь я пытаюсь получить event.target группы аккордеона, которая расширяется. Я использую приведенный ниже код для прокрутки события. 

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

Я попытался передать событие из "isOpenChange", но оно возвращает только 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>

enter image description here

1 Ответ

2 голосов
/ 17 мая 2019

Согласно коду в ngx-bootstrap, 

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

isOpenChange вернет только Boolean.

Вы можете добавить индекс для группы accordion, чтобы получить цель, 

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

Получить идентификатор аккордеона, 

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