Как сделать вкладки аккордеона независимыми?

#angular #typescript #primeng

#angular #typescript #primeng

Вопрос:

У меня есть этот простой аккордеон, а внутри у меня есть 3 аккордеонных язычка. Я хочу, чтобы все аккордеонные вкладки были открыты по умолчанию (у меня это уже получилось). Моя проблема в том, что если я закрою вкладку accordion 1, а затем открою ее снова, она закроет все остальные вкладки accordion. Я хочу, чтобы, если я закрою / открою любую вкладку accordion, это не повлияло на все остальные вкладки. Кто-нибудь знает, как это сделать? Заранее большое спасибо!

Это то, чего я хочу:

Рабочий пример

Это мой код:

ЖИВАЯ ДЕМОНСТРАЦИЯ

 <p-accordion>
 <p-accordionTab header="Accordion Tab 1" [selected]="true">
   <ul>
     <li>Colors</li>
     <li>Cities</li>
     <li>Facility</li>
     <li>Hobbies</li>
   </ul>
</p-accordionTab>
<p-accordionTab header="Accordion Tab 2" [selected]="true">
    <ul>
      <li>Students</li>
    </ul>
</p-accordionTab>
    <p-accordionTab header="Accordion Tab 3" [selected]="true">
    <ul>
      <li>Music</li>
    </ul>
 </p-accordionTab>
</p-accordion>
  

Ответ №1:

Добавьте [multiple]="true" в свой p-accordion

 <p-accordion [multiple]="true">
 <p-accordionTab header="Accordion Tab 1" [selected]="true">
   <ul>
     <li>Colors</li>
     <li>Cities</li>
     <li>Facility</li>
     <li>Hobbies</li>
   </ul>
</p-accordionTab>
<p-accordionTab header="Accordion Tab 2" [selected]="true">
    <ul>
      <li>Students</li>
    </ul>
</p-accordionTab>
    <p-accordionTab header="Accordion Tab 3" [selected]="true">
    <ul>
      <li>Music</li>
    </ul>
 </p-accordionTab>
</p-accordion>
  

больше информации в документах PrimeNG: