Angular 12 Bootstrap 5 ngFor аккордеон не закрывается

Я пытаюсь создать раскрывающийся список аккордеонов ngFor в Angular 12 с начальной загрузкой 5. Каким-то образом аккордеоны остаются открытыми и не могут быть закрыты.

Надеюсь, кто-нибудь знает, как заставить гармошку закрываться.

https://getbootstrap.com/docs/5.0/components/accordion/

    <div class="accordion">
        <div class="accordion-item" *ngFor="let category of cateories; let i = index">
            <h2 class="accordion-header" [attr.id]="'heading' + i">
                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                    [attr.data-target]="'#collapse' + i" aria-expanded="true" [attr.aria-controls]="'collapse' + i">
                    {{ category.title }}
                </button>
            </h2>
            <div [attr.id]="'collapse' + i" class="accordion-collapse collapse show" [attr.aria-labelledby]="'heading' + i"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <ul>
                        <li *ngFor="let childCategory of category.children">{{ childCategory.title }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

введите здесь описание изображения


angular bootstrap-5 bootstrap-accordion
person QuanDar    schedule 14.05.2021    source источник
comment
Почему бы не использовать библиотеку с компонентом аккордеона? что-то вроде ngx-bootstrap ?.   -  person Owen Kelvin    schedule 14.05.2021
comment
@OwenKelvin Потому что мне нужен бутстрап 5 атм для будущего обновления панели администратора. ngx-bootstrap по-прежнему использует bootstrap 4. Я не хочу использовать bootstrap 4 и bootstrap 5 вместе.   -  person QuanDar    schedule 14.05.2021
comment
Вот рабочий пример с фрагментами кода: therichpost.com/   -  person Ajay Malhotra    schedule 08.06.2021

Ответы (1)


arrow_upward
1
arrow_downward

Каким-то образом аккордеоны остаются открытыми и не могут быть закрыты.

Это потому, что вы не определили способ закрыть его. Вам, вероятно, потребуется настроить файлы сценариев JQuery и начальной загрузки ... Не рекомендуется.

Я бы порекомендовал вам рассмотреть возможность использования библиотеки для таких компонентов, например ngx-accordion

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

Вы можете установить свойство, чтобы отслеживать, открыт ли аккордеон. В вашем файле TS

openAccordion: boolean[] = []

И в вашем html

<div class="accordion">
  <div class="accordion-item" *ngFor="let category of cateories; let i = index">
    <h2 class="accordion-header" [attr.id]="'heading' + i">
      <button class="accordion-button" type="button"
            (click)='openAccordion[i] = !openAccordion[i]' data-bs-toggle="collapse"
                [attr.data-target]="'#collapse' + i" aria-expanded="true" [attr.aria-controls]="'collapse' + i">
                {{ category.title }}
            </button>
    </h2>
    <div [attr.id]="'collapse' + i" class="accordion-collapse collapse" [class.show]='openAccordion[i]'
      [attr.aria-labelledby]="'heading' + i" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <ul>
          <li *ngFor="let childCategory of category.children">{{ childCategory.title }}</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Пример демонстрации

Другой вариант — включить файл bootstrap js. Ниже представлена ​​демонстрация того, как это можно реализовать.

<div class="accordion" id="accordionContainer">
  <div class="accordion-item" *ngFor="let category of cateories; let i = index">
    <h2 class="accordion-header" [id]="'heading' + i">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse' + i" aria-expanded="true" [attr.aria-controls]="'collapse' + i">
       {{ category.title }}
      </button>
    </h2>
    <div [id]="'collapse' + i" class="accordion-collapse collapse show" [attr.aria-labelledby]="'heading' + i"
      data-bs-parent="#accordionContainer">
      <div class="accordion-body">
        <ul>
          <li *ngFor="let childCategory of category.children">{{ childCategory.title }}</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Посмотреть демо< /а>

person Owen Kelvin    schedule 14.05.2021
comment
Спасибо, но bootstrap 5 больше не использует JQuery. Если я не использую ngFor, все работает отлично. Я все еще жду, когда ngx обновится до bootstrap 5. - person QuanDar; 14.05.2021
comment
Я добавил подход без какой-либо привязки - person Owen Kelvin; 14.05.2021