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

问题描述

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

我的代码

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

解决方案

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

<!-- 禁用显示所有子内容.--><div *ngIf="!showSubContent && !showSubContentTwo && !showSubContentThree"><button (click)="showSubContent=!showSubContent">显示子内容1</button><button (click)="showSubContentTwo=!showSubContentTwo">显示子内容2</button><button (click)="showSubContentThree=!showSubContentThree">显示子内容3</button><h2>主要内容

<!-- 在启用 SubContent-1 时显示.--><div *ngIf="showSubContent && !showSubContentTwo && !showSubContentThree">子内容 1 在这里<button (click)="showSubContent=!showSubContent">显示主要内容</button>

<!-- 如果启用了 SubContent-2，则显示.--><div *ngIf="showSubContentTwo && !showSubContent && !showSubContentThree">子内容 2 在这里<button (click)="showSubContentTwo=!showSubContentTwo">显示主要内容</button>

<!-- 如果启用了 SubContent-3，则显示.--><div *ngIf="showSubContentThree && !showSubContentTwo && !showSubContent">子内容 3 在这里<button (click)="showSubContentThree=!showSubContentThree">显示主要内容</button>

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

My Code

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.

解决方案

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屋！