如何在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循環內有多個相同projectList的ngFor 。

要解決此問題，您需要在ngFor上對其進行索引

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

然后，可以通過附加索引值（例如projectList-1 ... etc）使id有所不同，並確保對data-target進行相同的操作。

Answer 2

問題是您對多個ngFor實例使用相同的ID。嘗試刪除該ID或為每個ngFor實例賦予不同的ID