Angular 4：Bootstrap 的折叠无法使用 data-target 属性

我对 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>

Update:

我确实导入了所有相关的 Bootstrap 和 jQuery 脚本。如下所示，ID 确实匹配。我不知道为什么它不起作用？ Angular 5 和 Bootstrap 的 Collapse 有问题吗？

我遇到了类似的问题角5 and 引导程序4，当我试图制作可折叠的东西时*ngFor。经过调试我发现data-target="#someId"被渲染为target="#someId"这就是引导崩溃不起作用的原因。

我找到了我的解决方案这个答案 https://stackoverflow.com/a/40203518/3070768。您的具体问题的解决方案是使用：

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