我使用的是Angular,我想在这个例子中使用*ngIf else(从版本4开始可用):
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>
我怎样才能用ngIf else实现同样的行为?
我使用的是Angular,我想在这个例子中使用*ngIf else(从版本4开始可用):
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>
我怎样才能用ngIf else实现同样的行为?
当前回答
在Angular 4、5和6中
我们可以简单地创建一个模板引用变量2,并将其链接到*ngIf指令中的else条件
可能的语法是:
<!-- Only If condition -->
<div *ngIf="condition">...</div>
<!-- or -->
<ng-template [ngIf]="condition"><div>...</div></ng-template>
<!-- If and else conditions -->
<div *ngIf="condition; else elseBlock">...</div>
<!-- or -->
<ng-template #elseBlock>...</ng-template>
<!-- If-then-else -->
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>...</ng-template>
<ng-template #elseBlock>...</ng-template>
<!-- If and else conditions (storing condition value locally) -->
<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>...</ng-template>
演示: https://stackblitz.com/edit/angular-feumnt?embed=1&file=src/app/app.component.html
来源:
NgIf -指令 模板的语法
其他回答
**ngIf else** <div *ngIf="isConditionTrue;else other_condition"> your content here </div> <ng-template #other_condition>other content here...</ng-template> **ngIf then else** <div *ngIf="isConditionTrue;then content else other_content">here is ignored</div> <ng-template #content>content here...</ng-template> <ng-template #other_content>other content here...</ng-template> **ngIf then** <div *ngIf="isConditionTrue;then content"></div> <ng-template #content>content here...</ng-template>
在Angular 4.0中,if..else语法非常类似于Java中的条件操作符。
在Java中,你使用“条件?stmnt1:stmnt2”。
在Angular 4.0中,你使用*ngIf="condition;then stmnt1 else stmnt2"。
这里有一些关于Angular的NgIf和使用else语句的漂亮而干净的语法。简而言之,你将在元素上声明一个ElementRef,然后在else块中引用它:
<div *ngIf="isLoggedIn; else loggedOut">
Welcome back, friend.
</div>
<ng-template #loggedOut>
Please friend, login.
</ng-template>
我从NgIf, Else, Then中取了这个例子,我发现这个例子解释得很好。
它还演示了使用<ng-template>语法:
<ng-template [ngIf]="isLoggedIn" [ngIfElse]="loggedOut">
<div>
Welcome back, friend.
</div>
</ng-template>
<ng-template #loggedOut>
<div>
Please friend, login.
</div>
</ng-template>
并且使用<ng-container>如果这是你想要的:
<ng-container
*ngIf="isLoggedIn; then loggedIn; else loggedOut">
</ng-container>
<ng-template #loggedIn>
<div>
Welcome back, friend.
</div>
</ng-template>
<ng-template #loggedOut>
<div>
Please friend, login.
</div>
</ng-template>
Source来自Angular的NgIf和Else语法。
"bindEmail"将检查电子邮件是否可用。如果电子邮件存在,则登出将显示。否则将显示Login。
<li *ngIf="bindEmail;then logout else login"></li>
<ng-template #logout><li><a routerLink="/logout">Logout</a></li></ng-template>
<ng-template #login><li><a routerLink="/login">Login</a></li></ng-template>
要使用可观察对象,如果可观察对象数组由数据组成,我通常会这样显示。
<div *ngIf="(observable$ | async) as listOfObject else emptyList">
<div >
....
</div>
</div>
<ng-template #emptyList>
<div >
...
</div>
</ng-template>