Angular 4：Bootstrap的折叠不适用于data-target属性 [英] Angular 4: Bootstrap's collapse does not work using data-target attribute

问题描述

我仍然对Angular 4（使用Angular-CLI）不熟悉。我不知何故无法完成简单的Bootstrap折叠工作。

I am still new to Angular 4 (using Angular-CLI). I somehow do not manage to get simple Bootstrap Collapse work.

以下是我的折叠代码：

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

I did import all the relevant Bootstrap and jQuery scripts. As you can see below, the IDs do match. I don't know why it does not work? Is there an issue with Angular 5 and Bootstrap's Collapse?

推荐答案

当我尝试在 Angular 5 和 Bootstrap 4 类似的问题> * ngFor 。调试后，我发现 data-target =＃someId 呈现为 target =＃someId ，即为什么引导崩溃无法正常工作。

I was facing a similar issue with Angular 5 and Bootstrap 4, when I was trying to make collapsibles in *ngFor. After debugging I found that data-target="#someId" is rendered as target="#someId" and that's why the bootstrap collapse wasn't working.

我在这找到了解决方案答案。您特定问题的解决方案是使用：

I found my solution in this answer. The solution to your specific question would be to use:

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

这篇关于Angular 4：Bootstrap的折叠不适用于data-target属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！