我想隐藏一个 div 并显示另一个我在下面编写的代码
我的问题是我在 ngIf 中使用了多个条件但没有正常工作。单击“显示子内容 1”后,我想隐藏主要内容并显示“子内容 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>
关于angular - Angular 6 中 ngIf 的多个条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51947534/