Angular 6 中 ngIf 中的多个条件
Posted
技术标签:
【中文标题】Angular 6 中 ngIf 中的多个条件【英文标题】:Multiple Conditions in ngIf in Angular 6 【发布时间】:2019-01-27 13:47:11 【问题描述】:我想隐藏一个 div 并想显示另一个我写在下面的代码
My Code
我的问题是我在 ngIf 中使用了多个条件但无法正常工作。一旦我点击“显示子内容1”,想要隐藏主要内容并想要显示“子内容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>
【讨论】:
非常感谢@Nasiruddin Saiyed :) 代码 【参考方案2】:您可以使用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>
【讨论】:
【参考方案3】:没有必要使用这么多条件来制作这样的作品。这也不是直观的理解你的逻辑,而是使用 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>
【讨论】:
以上是关于Angular 6 中 ngIf 中的多个条件的主要内容,如果未能解决你的问题,请参考以下文章
根据 ngIf 条件更改 Angular 中 NavBar 的内容
Angular 在哪里为 *ngIf 定义了“作为 local-var”行为?
Angular2:条件显示,绑定到 [hidden] 属性与 *ngIf 指令 [重复]