Angular 角度4：自举'；使用数据目标属性时，s折叠不起作用

我仍然不熟悉Angular 4（使用Angular CLI）。不知何故，我无法获得简单的引导折叠工作

以下是我的折叠代码：

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

{{idea.title}
{{idea.author}
{{idea.description}}

更多
显示细节

更新：

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

---

当我试图在

*ngFor

中制作可折叠文件时，我在Angular 5和Bootstrap 4中遇到了类似的问题。调试后，我发现

data target=“#someId”

呈现为

target=“#someId”

，这就是引导折叠无法工作的原因

我找到了解决办法。您具体问题的解决方案是使用：

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

---

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

看完你的评论后，我知道问题出在哪里了。您正在使用bootstrap3并查看bootstrap4的示例，以实现您想要的功能

---

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

bootstrap的版本是什么？您是否检查了呈现的HTML以确保正确设置了

数据目标

和

id

属性？您可以添加屏幕截图吗？根据您的描述，一切都应该正常。所以我认为你没有在这里提供重要的细节让我们帮助你。你能通过或分享你的例子吗？@ZimSystem:不，我还没有检查渲染版本。数据目标值和id之间可能不匹配。这就是问题所在吗？错误的引导版本？我在Angular 6中遇到了这个问题，并且attr.data-target也被渲染为attr.data-target，您知道如何使用Angular 6解决这个问题吗？我可以通过查看代码来帮助您。。。问题的原因可能是其他原因@SherwinAblañaDapitohero！你救了我一天