Question

我的项目处于角度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>

Answer 1

如果只是显示和隐藏数据，请尝试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}"

Answer 2

working Demo

您可以使用[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>

in .ts

item = 1;

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

Answer 3

您可以通过将#include<iostream> using namespace std; int main(){ int n = 10; cout << *(&n); }替换为[class.show]来实现它

Working Demo

*ngIf

注意：如果要默认显示第一个标签，请在.ts文件中设置<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>

如果再次单击，如何显示和隐藏折叠

3 个答案: