Блог

Главная - Вопросы по программированию - Динамически создавайте аккордеон с помощью *ngFor

Динамически создавайте аккордеон с помощью *ngFor

#javascript #angular #angular-ui-bootstrap

Вопрос:

При создании аккордеона я смог динамически получать предметы для аккордеона. Проблема сейчас в том, что все они открываются одновременно. Можно ли открывать их по одному на основе идентификатора?

Это мой код:

 <div class="accordion" id="accordionExample">
    <div *ngFor="let task of tasks" class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            {{task.name}}
        </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                {{task.description}}
            </div>
        </div>
    </div>
</div>

Я предполагаю, что проблема в том, что «collapseOne» жестко закодирован, но я не могу найти решение в Интернете.

Комментарии:

1. Вы можете получить индекс с помощью ngFor, а затем добавить его в строку идентификатора

Ответ №1:

У меня нет опыта игры на аккордеоне. Но, судя по коду, похоже, вам нужно привязать отдельные идентификаторы к каждому элементу. Вы можете попробовать использовать index локальную переменную *ngFor директивы.

 <div class="accordion" id="accordionExample">
  <div *ngFor="let task of tasks; let i=index" class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button 
        class="accordion-button" 
        type="button" 
        data-bs-toggle="collapse{{i}}" 
        data-bs-target="#collapseOne{{i}}"
        aria-expanded="true"
        aria-controls="collapseOne{{i}}"
      >
        {{task.name}}
      </button>
    </h2>
    <div 
      id="collapseOne{{i}}" 
      class="accordion-collapse collapse show" 
      aria-labelledby="headingOne"
      data-bs-parent="#accordionExample"
    >
      <div class="accordion-body">
        {{task.description}}
      </div>
    </div>
  </div>
</div>
Метки: