我还是 Angular 4 的新手(使用 Angular-CLI)。我不知何故无法完成简单的 Bootstrap Collapse 工作。
以下是我的折叠代码:
<div *ngFor="let idea of ideas" class="panel panel-default">
<div class="panel-heading">{{ idea.title }}</div>
<div class="panel-body">
<cite>{{ idea.author }}</cite>
<p>{{ idea.description }}</p>
<button type="button" class="btn btn-primary" data-toggle="collapse" [attr.data-target]="'#'+idea._id" aria-expanded="false" [attr.aria-controls]="idea._id">More</button>
</div>
<div [attr.id]="idea._id" class="collapse"><p>Show Details</p></div>
</div>
更新:
我确实导入了所有相关的 Bootstrap 和 jQuery 脚本。如下所示,ID 确实匹配。我不知道为什么它不起作用? Angular 5 和 Bootstrap 的 Collapse 是否存在问题?
最佳答案
当我尝试在 *ngFor
中制作可折叠项时,我在 Angular 5 和 Bootstrap 4 中遇到了类似的问题。调试后,我发现 data-target="#someId"
呈现为 target="#someId"
,这就是 Bootstrap 崩溃不起作用的原因。
我在this answer中找到了我的解决方案。您的具体问题的解决方案是使用:
attr.data-target="#{{idea._id}}"
关于 Angular 4 : Bootstrap's collapse does not work using data-target attribute,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49429536/