Angular 4：Bootstrap的崩溃使用data-target属性不起作用

Question

我还是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的崩溃是否存在问题？

Answer 1

当我尝试在*ngFor中制作可折叠内容时，我遇到了与 Angular 5 和 Bootstrap 4 类似的问题。调试后，我发现data-target="#someId"呈现为target="#someId"，这就是为什么引导程序崩溃无法正常工作。

我在this answer找到了我的解决方案。您的具体问题的解决方案是使用：

attr.data-target="#{{idea._id}}"

Answer 2

我在这里看到的第一个问题是你缺少JQuery。如果你已经包含了，那么你可能在bootstrap.js（min.js）之后完成了它。您应该修复它，因为主要需要切换元素。

阅读完评论后，我发现问题出在哪里。您正在使用bootstrap 3并查看bootstrap 4的示例以实现您的目的。

对于bootstrap 3，您需要使用href =“＃id”来切换它而不是data-target =“＃id”。