我使用的是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-template
<ng-template [ngIf]="condition1" [ngIfElse]="template2">
...
</ng-template>
<ng-template #template2>
...
</ng-template>
其他回答
你可以使用<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现场演示:
现场演示
还可以使用JavaScript的短三元条件运算符吗?在Angular中是这样的:
{{doThis() ? 'foo' : 'bar'}}
or
<div [ngClass]="doThis() ? 'foo' : 'bar'">
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实例化。
ng-template
<ng-template [ngIf]="condition1" [ngIfElse]="template2">
...
</ng-template>
<ng-template #template2>
...
</ng-template>
<div *ngIf="show; else elseBlock">Text to show</div>
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>