Angular 6 中 ngIf 中的多个条件

Question

我想隐藏一个 div 并想显示另一个我在代码下面写的

我的代码

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

Answer 1

你刚刚接近你的结果，看着你的代码看起来你正在学习，干得好！！您必须检查是否启用了任何一项内容，因此您需要隐藏所有三个按钮并显示您的子内容。以下是根据您的要求正确的代码，

<!-- Display all of the SubContents is disable. -->
<div *ngIf="!showSubContent && !showSubContentTwo && !showSubContentThree">
     <button (click)="showSubContent=!showSubContent">Show Sub content1</button>
     <button (click)="showSubContentTwo=!showSubContentTwo">Show Sub content2</button>
     <button (click)="showSubContentThree=!showSubContentThree">Show Sub content3</button> 
     <h2>  Main content </h2>
</div>

<!-- Display if SubContent-1 is enable. -->
<div *ngIf="showSubContent && !showSubContentTwo && !showSubContentThree">
    Sub Content 1 here
    <button (click)="showSubContent=!showSubContent">Show Main Content</button>
</div>

<!-- Display if SubContent-2 is enable. -->
<div *ngIf="showSubContentTwo && !showSubContent && !showSubContentThree">
    Sub Content 2 here
    <button (click)="showSubContentTwo=!showSubContentTwo">Show Main Content</button>
</div>

<!-- Display if SubContent-3 is enable. -->
<div *ngIf="showSubContentThree && !showSubContentTwo && !showSubContent">
    Sub Content 3 here
    <button (click)="showSubContentThree=!showSubContentThree">Show Main Content</button>
</div>