Angular 4 : Bootstrap's collapse does not work using data-target attribute

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 的 Collapse 是否存在问题？

Answer 1

当我尝试在 *ngFor 中制作可折叠项时，我在 Angular 5 和 Bootstrap 4 中遇到了类似的问题。调试后，我发现 data-target="#someId" 呈现为 target="#someId"，这就是 Bootstrap 崩溃不起作用的原因。

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

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