Angular 6中ngIf中的多个条件 [英] Multiple Conditions in ngIf in Angular 6

问题描述

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

I want to hide one div and want to show another for that I have written below code

我的代码

我的问题是我在ngIf中使用了多个条件，但无法正常工作.一旦我单击显示子内容1"，则要隐藏主要内容，并要显示子内容1"，反之亦然.我该怎么办.请帮忙.

My problem is I have used multiple conditions in ngIf but not working properly. Once I click on "Show sub content1" want to hide main content and want to show "Sub Content 1" and vise versa for all buttons. What should I do for this. Please help.

推荐答案

您刚刚接近您的结果，并且查看您的代码就像您正在学习，好工作！！您必须检查是否启用了任何内容，因此您需要隐藏所有三个按钮并显示您的Sub内容.以下是根据您的要求正确的代码，

Your were just near to your result and looking into your code looks like you are learning, Good Work!! you have to check just if any one of the content is enable so you need to hide All of the three buttons and display your Sub contents. Below is the correct code as per your requirement,

<!-- 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 6中ngIf中的多个条件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！