角度隐藏并显示多个div

Question

对angular来说还很陌生，我尝试过在网上寻找我要实现的目标的示例，但所有示例似乎都没有帮助我

我有5个标签，每个标签代表一个信息主体。我希望它最初显示第一个框的信息，但是当您单击其他框时，它将替换为其他框的信息

所以基本上是捉迷藏。仅显示我单击的框的信息。这是我的意思HTML的布局：

<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

<div class="box1-content">Lorem ipsum 1</div>
<div class="box2-content">Lorem ipsum 1</div>
<div class="box3-content">Lorem ipsum 1</div>
<div class="box4-content">Lorem ipsum 1</div>
<div class="box5-content">Lorem ipsum 1</div>

CSS：

 .boxes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    padding: 10px;
    }

    .box {
     height: 100px;
     background: red;
    }

https://codepen.io/anon/pen/gZZYpR

Answer 1

改变你.html喜欢这个

<div class="boxes">
<div class="box" (click)="tabToggle(1)">box1</div>
<div class="box" (click)="tabToggle(2)">box2</div>
<div class="box" (click)="tabToggle(3)">box3</div>
<div class="box" (click)="tabToggle(4)">box4</div>
<div class="box" (click)="tabToggle(5)">box5</div>
</div>

<div *ngIf="showTab == 1" class="box1-content">Lorem ipsum 1</div>
<div *ngIf="showTab == 2" class="box2-content">Lorem ipsum 2</div>
<div *ngIf="showTab == 3" class="box3-content">Lorem ipsum 3</div>
<div *ngIf="showTab == 4" class="box4-content">Lorem ipsum 4</div>
<div *ngIf="showTab == 5" class="box5-content">Lorem ipsum 5</div>

在.ts文件的下层组件上添加此行。

  showTab = 1;
  tabToggle(index){
    this.showTab =index;
  }