Mientras construía un acordeón, pude obtener elementos de acordeón de forma dinámica. El problema ahora es que abren todos a la vez. ¿Es posible abrirlos uno por uno según la identificación?
Este es mi código:
<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>Supongo que el problema es que "collapseOne" está codificado, pero no puedo encontrar la solución en línea.
No tengo experiencia con el acordeón. Pero a juzgar por el código, parece que necesita vincular ID individuales a cada elemento. Podría intentar usar la variable local de index de la directiva *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>