我使用的是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和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实例化。
其他回答
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实例化。
这里有一些关于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语法。
所以,这实际上并没有使用ng-if,但许多建议似乎是处理在条件语句中编写文本。我认为这种方法是用最少的代码或复杂性来做到这一点的最好方法。你来评判吧。
<div>{{variable == null ? 'Testing1' : 'Testing2'}}<div>
OR
<div>{{variable == null ? var1 : var2 }}<div>
还可以使用JavaScript的短三元条件运算符吗?在Angular中是这样的:
{{doThis() ? 'foo' : 'bar'}}
or
<div [ngClass]="doThis() ? 'foo' : 'bar'">
在Angular 4.0中,if..else语法非常类似于Java中的条件操作符。
在Java中,你使用“条件?stmnt1:stmnt2”。
在Angular 4.0中,你使用*ngIf="condition;then stmnt1 else stmnt2"。