我使用的是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实现同样的行为?
当前回答
你可以使用<ng-container>和<ng-template>来实现:
<ng-container *ngIf="isValid; then template1 else template2"></ng-container>
<ng-template #template1>
<div>Template 1 contains</div>
</ng-template>
<ng-template #template2>
<div>Template 2 contains </div>
</ng-template>
你可以在下面找到StackBlitz现场演示:
现场演示
其他回答
"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>
Angular 4和Angular 5:
使用其他:
<div *ngIf="isValid;else other_content">
content here ...
</div>
<ng-template #other_content>other content here...</ng-template>
你也可以用then else:
<div *ngIf="isValid;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>
或者独自一人:
<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>
演示:
砰砰作响
细节:
<ng-template>:是Angular自己对<template>标签的实现,根据MDN:
HTML <template>元素是一种保存客户端的机制 加载页面时不呈现但可以呈现的内容 然后在运行时使用JavaScript实例化。
还可以使用JavaScript的短三元条件运算符吗?在Angular中是这样的:
{{doThis() ? 'foo' : 'bar'}}
or
<div [ngClass]="doThis() ? 'foo' : 'bar'">
在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 -指令 模板的语法
<div *ngIf="this.model.SerialNumber != '';then ConnectedContent else DisconnectedContent" class="data-font"> </div>
<ng-template #ConnectedContent class="data-font">Connected</ng-template>
<ng-template #DisconnectedContent class="data-font">Disconnected</ng-template>