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

问题是由于projectList循环内有多个相同的ngFor标识。

要解决此问题，您需要在ngFor上为其编入索引

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

然后，您可以通过附加索引值（例如projectList-1 ...等）来使ID有所不同，并确保对data-target执行相同的操作。

Answer 2

问题是您对多个ngFor实例使用相同的ID。尝试删除该ID 或为每个ngFor实例赋予不同的ID

如何在Angular 6中仅折叠/展开单个按钮

2 个答案: