PrimeNG, Открытый аккордеон на мероприятии Mouse hover

Question

У меня есть приложение Angular 8, и я использую PrimeNG 8. В одном из моих компонентов у меня есть несколько аккордеонов, где я хочу открыть аккордеон на событии Mouse hover. Пожалуйста, смотрите документацию здесь https://www.primefaces.org/primeng/# / аккордеон .

Может кто-нибудь помочь, пожалуйста, как этого добиться при наведении мыши.

Answer 1

Вы можете использовать свойство activeIndex и событие JavaScript onmouseover. С помощью события вы можете установить свойство класса publi c, например index.

<p-accordion [activeIndex]="index">
    <p-accordionTab header="Header 1" (mouseover)="index = 0">
        Content 1
    </p-accordionTab>
    <p-accordionTab header="Header 1" (mouseover)="index = 1">
        Content 1
    </p-accordionTab>
</p-accordion>

И в вашем классе вам понадобится индекс как глобальное свойство.

@Component({ ... })
export class XYComponent {
  index = 0;
}

Иметь посмотрите на это stackblitz .

EDIT: Это на самом деле работает с OnPu sh ChangeDetectionStrategy.