时间戳

首页 > 解决方案 > 角度 6 上特定 ID 引导程序 3 的折叠按钮

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

问题描述

我正在尝试使用引导程序 3 和角度 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 起作用？

标签： angulartwitter-bootstrap-3angular6

解决方案

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

尝试使用不同的变量#collapseone，#collapsetwo 否则我认为他们自己冲突

推荐阅读