我使用的是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实现同样的行为?
当前回答
在HTML标签或模板上使用if条件有两种可能:
*ngIf指令来自CommonModule,在HTML标签上; if - else
其他回答
对于Angular 9/8
源链接及示例
export class AppComponent {
isDone = true;
}
1) * ngIf
<div *ngIf="isDone">
It's Done!
</div>
<!-- Negation operator-->
<div *ngIf="!isDone">
It's Not Done!
</div>
2) *ngIf和Else
<ng-container *ngIf="isDone; else elseNotDone">
It's Done!
</ng-container>
<ng-template #elseNotDone>
It's Not Done!
</ng-template>
3) *ngIf, Then和Else
<ng-container *ngIf="isDone; then iAmDone; else iAmNotDone">
</ng-container>
<ng-template #iAmDone>
It's Done!
</ng-template>
<ng-template #iAmNotDone>
It's Not Done!
</ng-template>
<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>
在HTML标签或模板上使用if条件有两种可能:
*ngIf指令来自CommonModule,在HTML标签上; if - else
ngIf/Else的语法
<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>
使用NgIf / Else/ Then显式语法
要添加then模板,只需显式地将其绑定到模板。
<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div>
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>
NgIf和Async Pipe的可观察对象
欲知详情
还可以使用JavaScript的短三元条件运算符吗?在Angular中是这样的:
{{doThis() ? 'foo' : 'bar'}}
or
<div [ngClass]="doThis() ? 'foo' : 'bar'">