typescript Angular 6 中 ngIf 中的多个条件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51947534/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple Conditions in ngIf in Angular 6
提问by vedankita kumbhar
I want to hide one div and want to show another for that I have written below code
我想隐藏一个 div 并想显示另一个我在代码下面写的
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.
我的问题是我在 ngIf 中使用了多个条件但无法正常工作。单击“显示子内容 1”后，我想隐藏主要内容并希望显示所有按钮的“子内容 1”，反之亦然。我该怎么做。请帮忙。
采纳答案by Nasiruddin Saiyed
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>
回答by sloth
You could simplify your code using ngSwitch:
您可以使用ngSwitch以下方法简化代码：
<div [ngSwitch]="showSubContent">
<div *ngSwitchDefault>
<button (click)="showSubContent=1">Show Sub content1</button>
<button (click)="showSubContent=2">Show Sub content2</button>
<button (click)="showSubContent=3">Show Sub content3</button>
<h2> Main content </h2>
</div>
<div *ngSwitchCase="1">
Sub Content 1 here
</div>
<div *ngSwitchCase="2">
Sub Content 2 here
</div>
<div *ngSwitchCase="3">
Sub Content 3 here
</div>
<button *ngIf="showSubContent" (click)="showSubContent=0">Show Main Content</button>
</div>
回答by Pramod Patil
There is no need to use so many conditions to make work like this. This is not intutive as well to understand your logic instead use switch
没有必要用这么多条件来做这样的工作。这也不是直观地理解您的逻辑，而是使用 switch
// 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>
