我使用的是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实现同样的行为?
当前回答
我所采用的方法是在组件中有两个标志,并为对应的两个标志设置两个ngif。
它是简单的,并与ng-template和材料不一起工作很好。
其他回答
在HTML标签或模板上使用if条件有两种可能:
*ngIf指令来自CommonModule,在HTML标签上; if - else
在Angular 4.x.x中
你可以用四种方式使用ngIf来实现一个简单的if-else过程:
Just use If <div *ngIf="isValid"> If isValid is true </div> Using If with Else (please notice to templateName) <div *ngIf="isValid; else templateName"> If isValid is true </div> <ng-template #templateName> If isValid is false </ng-template> Using If with Then (please notice to templateName) <div *ngIf="isValid; then templateName"> Here is never showing </div> <ng-template #templateName> If isValid is true </ng-template> Using If with Then and Else <div *ngIf="isValid; then thenTemplateName else elseTemplateName"> Here is never showing </div> <ng-template #thenTemplateName> If isValid is true </ng-template> <ng-template #elseTemplateName> If isValid is false </ng-template>
提示:ngIf对表达式求值,然后呈现then或else 当表达式分别为真或假时,模板在其位置。 通常: 那么template就是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>
要使用可观察对象,如果可观察对象数组由数据组成,我通常会这样显示。
<div *ngIf="(observable$ | async) as listOfObject else emptyList">
<div >
....
</div>
</div>
<ng-template #emptyList>
<div >
...
</div>
</ng-template>
"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>