Angular ngIf中的多个条件在角度6

我想隐藏一个div并显示另一个div，因为我已经在下面编写了代码

---

我的问题是我在ngIf中使用了多个条件，但没有正常工作。单击“显示子内容1”后，我想隐藏主要内容并显示“子内容1”，反之亦然。我该怎么办。请帮助。

您的测试结果很接近，查看您的代码看起来您正在学习，做得好！！您必须检查是否有任何一个内容处于启用状态，因此需要隐藏所有三个按钮并显示子内容。以下是符合您要求的正确代码

显示子内容1
显示子内容2
显示子内容3
主要内容
此处为子内容1
展示主要内容
此处为子内容2
展示主要内容
此处为子内容3
展示主要内容

您可以使用以下方法简化代码：

显示子内容1
显示子内容2
显示子内容3
主要内容
此处为子内容1
此处为子内容2
此处为子内容3
展示主要内容

没有必要使用如此多的条件来实现这样的工作。这不是直观的，也不能理解您的逻辑，而是使用开关

// Define a variable with name content in component
export class AppComponent  {
content = 'mainContent'
constructor() {
}}

<div>
   <button (click)="content='showSubContent'">Show Sub content1</button>
   <button (click)="content='showSubContentTwo'">Show Sub content2</button>
   <button (click)="content='showSubContentThree'">Show Sub content3</button>
 </div>
<div [ngSwitch]="content">

 <div *ngSwitchDefault>
   My Main content
  </div> 
<div *ngSwitchCase="'showSubContent'">
   Sub Content 1 here
   <button (click)="content='showMainContent'">Show Main Content</button>
</div>

<div *ngSwitchCase="'showSubContentTwo'">
   Sub Content 2 here
   <button (click)="content='showMainContent'">Show Main Content</button>
</div>

<div *ngSwitchCase="'showSubContentThree'">
   Sub Content 3 here
   <button (click)="content='showMainContent'">Show Main Content</button>
</div>
</div>

//在组件中定义一个名为content的变量
导出类AppComponent{
内容='mainContent'
构造函数（）{
}}
显示子内容1
显示子内容2
显示子内容3
我的主要内容
此处为子内容1
展示主要内容
此处为子内容2
展示主要内容
此处为子内容3
展示主要内容

非常感谢@Nasiruddin Saiyed:）code

// Define a variable with name content in component
export class AppComponent  {
content = 'mainContent'
constructor() {
}}

<div>
   <button (click)="content='showSubContent'">Show Sub content1</button>
   <button (click)="content='showSubContentTwo'">Show Sub content2</button>
   <button (click)="content='showSubContentThree'">Show Sub content3</button>
 </div>
<div [ngSwitch]="content">

 <div *ngSwitchDefault>
   My Main content
  </div> 
<div *ngSwitchCase="'showSubContent'">
   Sub Content 1 here
   <button (click)="content='showMainContent'">Show Main Content</button>
</div>

<div *ngSwitchCase="'showSubContentTwo'">
   Sub Content 2 here
   <button (click)="content='showMainContent'">Show Main Content</button>
</div>

<div *ngSwitchCase="'showSubContentThree'">
   Sub Content 3 here
   <button (click)="content='showMainContent'">Show Main Content</button>
</div>
</div>