Как свернуть / развернуть только одну кнопку в Angular 6

Question

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

HTML

<div id="accordion" *ngFor="let project of projects">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#projectList" aria-expanded="true" aria-controls="collapseOne">
                    {{project.projectName}}
                </button>
            </h5>
        </div>

        <div id="projectList" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
                {{project.projectDescription}}
            </div>
        </div>
    </div>
</div>

Что мне нужно изменить, чтобы кнопки разворачивались / разворачивались только для кнопки, которую я нажимаю?

Answer 1

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

Answer 2

Проблема заключается в том, что несколько идентичных идентификаторов projectList находятся внутри цикла ngFor.

Чтобы это исправить, вам нужно проиндексировать его на ngFor

*ngFor="let project of projects; let i = index"

Затем вы можете немного изменить свои идентификаторы, добавив значение индекса (например, projectList-1 ... и т. Д.), Также убедитесь, что вы делаете то же самое для data-target.