如何在没有标志的情况下使用ngx-bootstrap angular折叠 [英] how to collapse with ngx-bootstrap angular without a flag

问题描述

我正在尝试制作折叠动画，但是没有布尔值指示器 isCollapsed ，因为我有很多元素并且我不想做很多布尔值，所以有一种方法在没有布尔指标的情况下做到这一点?

i am trying to do a collapse animation, but without the boolean indicator isCollapsed, because i have a lot of elements and i don´t want to make a lot of booleans, there is a way to do that without a boolean indicator?

<button type="button" class="btn btn-primary" (click)="isCollapsed = !isCollapsed"
        [attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic">Toggle collapse
</button>
<hr>
<div id="collapseBasic" [collapse]="isCollapsed">
  <div class="well well-lg card card-block card-header">Some content</div>
</div>

组件:

import { Component } from '@angular/core';
 
@Component({
  selector: 'collapse-demo',
  templateUrl: './basic.html'
})
export class CollapseDemoComponent {
  isCollapsed = false;
}

谢谢！

此示例来自文档 https://valor-software.com/ngx-bootstrap/#/collapse#examples

推荐答案

您可以有很多折叠组件.

You can have lots of collapse components.

<collapse-demo-animation content="content a"></collapse-demo-animation>
<collapse-demo-animation content="content b"></collapse-demo-animation>
<collapse-demo-animation content="content c"></collapse-demo-animation>
<collapse-demo-animation content="content d"></collapse-demo-animation>
<collapse-demo-animation content="content e"></collapse-demo-animation>
<collapse-demo-animation content="content f"></collapse-demo-animation>

https://stackblitz.com/edit/angular-ryym9l-uvya9e

这篇关于如何在没有标志的情况下使用ngx-bootstrap angular折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！