再次点击如何使折叠显示和隐藏答案

【问题标题】：How to make collapse show and hidden if click to again再次点击如何使折叠显示和隐藏
【发布时间】：2020-03-22 13:30:41
【问题描述】：

我的项目是 Angular 2。我让标签折叠，如果再次单击按钮但由数据动态或循环制成，我希望隐藏折叠：

我的html代码：

  <button (click)="item = 1" class="navbar-toggler navbar-toggler-right" type="button" class="btn mr-3">tab 1</button>
  <button (click)="item = 2" class="navbar-toggler navbar-toggler-right" type="button" class="btn">tab 2</button>

  <div class="collapse" [class.show]="item === 1">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos cumque voluptate dolorem tenetur nesciunt!
  </div>
  <div class="collapse" [class.show]="item === 2">
      Tempora iure porro incidunt laboriosam earum nesciunt repellendus culpa, iste doloribus provident aut, ipsam,
      consectetur quam!
  </div>

【问题讨论】：

在这里查看答案； stackoverflow.com/questions/45467248/…
见codecraft.tv/courses/angular/built-in-directives/…

标签： angular bootstrap-4 tabs collapse

【解决方案1】：

working Demo

您可以在 Angular 中使用[class] 属性来实现此目的

HTML

 <button (click)="item = 1" [class] ="item===1? 'navbar-toggler navbar-toggler-right btn mr-3 btn btn-info' : 'navbar-toggler navbar-toggler-right btn mr-3'" type="button" >tab 1</button>
  <button (click)="item = 2" [class] ="item===2? 'navbar-toggler navbar-toggler-right btn mr-3 btn btn-info' : 'navbar-toggler navbar-toggler-right btn mr-3'" type="button" >tab 2</button>

  <div [class]="item == 1? 'collapse': ''">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos cumque voluptate dolorem tenetur nesciunt!
  </div>
  <div  [class]="item == 2? 'collapse': ''">
    Tempora iure porro incidunt laboriosam earum nesciunt repellendus culpa, iste doloribus provident aut, ipsam,
    consectetur quam!
  </div>

在.ts中

item = 1;

希望这会有所帮助...！

【讨论】：

【解决方案2】：

如果只是显示和隐藏数据，试试ngIf

<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>Content to render when condition is true.</ng-template>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

如果您需要添加或删除课程，请尝试ngClass

[ngClass]="{'show': item == 1}"

【讨论】：

【解决方案3】：

只需将[class.show] 替换为*ngIf 即可实现

Working Demo

  <div class="collapse" *ngIf="item == 1">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos cumque voluptate dolorem tenetur nesciunt!
  </div>
  <div class="collapse" *ngIf="item == 2">
    Tempora iure porro incidunt laboriosam earum nesciunt repellendus culpa, iste doloribus provident aut, ipsam,
    consectetur quam!
  </div>

注意：如果要默认显示第一个选项卡，请在 .ts 文件中设置item=1

【讨论】：