Question

我是角度新手，我有两个折叠div元素，当我单击button1时，div元素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>

https://stackblitz.com/edit/angular5-bootstrap4-crud-device-list-simple-zxunj1?file=app%2Fapp.component.html

Answer 1

我建议您看一下这个库： ng bootstrap

没有这个，我无法使折叠工作优点是不需要其他JavaScript

Answer 2

您应该在show div上切换collapse类...

  <div>
    <div id="demo1" class="collapse" [ngClass]="{'show':selectItem=='one'}">
      <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>
    <div id="demo2" class="collapse" [ngClass]="{'show':selectItem=='two'}">
      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>

https://stackblitz.com/edit/angular5-bootstrap4-crud-device-list-simple-wwbgwd?file=app/app.component.html

如何在Angular中使用bootstrap崩溃

2 个答案: