角度 6 上特定 ID 引导程序 3 的折叠按钮答案

【问题标题】：collapse buttom for specific id bootstrap 3 on angular 6角度 6 上特定 ID 引导程序 3 的折叠按钮
【发布时间】：2018-11-16 01:05:34
【问题描述】：

我正在尝试使用 bootstrap 3 和 angular 6 中的折叠按钮显示特定文本（根据这些说明 - https://valor-software.com/ngx-bootstrap/#/collapse#accessibility）。

我使用的代码是这样的：

<button type="button" class="btn btn-primary" (click)="collapse.show()"
        aria-controls="collapseManual1">Show content
</button>

<hr>
<div id="collapseManual1" #collapse="bs-collapse" [collapse]="!isOpen"
     class="card card-block card-header">
  <div class="well well-lg">Some content1</div>
</div>
<div id="collapseManual2" #collapse="bs-collapse" [collapse]="!isOpen"
     class="card card-block card-header">
  <div class="well well-lg">Some content2</div>
</div>

我写它是为了看看我是否可以以某种方式折叠第一个 div，但它不起作用，代码只折叠第二个 div。 aria-controls 不会产生任何影响。似乎显示的是最后一个具有 #collapse="bs-collapse" 的元素。

我也尝试添加数据目标：

<button type="button" class="btn btn-primary" (click)="collapse.show()" data-target="#collapseManual1" aria-controls="collapseManual1">Show content
</button>

和href：

<button type="button" class="btn btn-primary" (click)="collapse.show()" href="#collapseManual1" aria-controls="collapseManual1">Show content
</button>

但结果是一样的。

如何让 collapse.show() 作用于特定的 id？

【问题讨论】：

标签： angular twitter-bootstrap-3 angular6

【解决方案1】：

您正在为两个 div 分配相同的模板引用变量 #collapse

尝试使用不同的变量，例如 #collapseone 和 #collapsetwo 否则我认为他们是在自相矛盾

【讨论】：