angular - 如何在 Angular 中使用 Bootstrap 折叠
问题描述
我是 Angular 的新手,我有两个折叠 div 元素,当我点击 button1 时,div element-1 需要折叠,而 element-2 需要隐藏。
当我单击 button2 时,div element-2 需要折叠并且 element-1 需要隐藏,但是使用下面的代码它不起作用。
<div class="container">
<h2>Simple Collapsible</h2>
<button type="button" class="btn btn-info" (click)="selectItem='one'" data-toggle="collapse" data-target="#demo1">Simple
collapsible</button>
<button type="button" class="btn btn-info" (click)="selectItem='two'" data-toggle="collapse" data-target="#demo2">Simple
collapsible</button>
<div [ngClass]="(selectItem=='one')?'visiable':'hide'">
<div id="demo1" class="collapse">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h2>
</div>
</div>
<div [ngClass]="(selectItem=='two')?'visiable':'hide'">
<div id="demo2" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
解决方案
我建议看看这个库: ng bootstrap
没有这个,我无法使折叠工作优势是不需要额外的javascript
推荐阅读
- java - 无法在 HandlerInterceptor postHandle() 方法中读取请求正文
- javascript - 将嵌套数组中的对象数组分组并将其总数添加到新数组中
- c# - 在 webapi .net core 3.1 上添加 app.useauthentication 时 Cors 失败
- apache-poi - Apache POI Excelsheet 到 pdf 文件
- git - 如何解决 GitHub 和 VisualStudio 上的烂摊子
- java - 如果我使用 STS 使用 java 8,那么 java 中 List.of() 的替代方法是什么
- asp.net-core-webapi - 并行文件下载 asp.net core
- abp - Abp vNext Rowaction 下拉按钮文本
- jenkins - TriggerRemoteJob - 连接到远程服务器失败
- parquet - 增量加载的 parquet 文件如何提高性能?