我使用的是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实例化。
其他回答
**ngIf else** <div *ngIf="isConditionTrue;else other_condition"> your content here </div> <ng-template #other_condition>other content here...</ng-template> **ngIf then else** <div *ngIf="isConditionTrue;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> **ngIf then** <div *ngIf="isConditionTrue;then content"></div> <ng-template #content>content here...</ng-template>
只需从Angular 8中添加新的更新。
For case if with else, we can use ngIf and ngIfElse. <ng-template [ngIf]="condition" [ngIfElse]="elseBlock"> Content to render when condition is true. </ng-template> <ng-template #elseBlock> Content to render when condition is false. </ng-template> For case if with then, we can use ngIf and ngIfThen. <ng-template [ngIf]="condition" [ngIfThen]="thenBlock"> This content is never showing </ng-template> <ng-template #thenBlock> Content to render when condition is true. </ng-template> For case if with then and else, we can use ngIf, ngIfThen, and ngIfElse. <ng-template [ngIf]="condition" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock"> This content is never showing </ng-template> <ng-template #thenBlock> Content to render when condition is true. </ng-template> <ng-template #elseBlock> Content to render when condition is false. </ng-template>
在Angular 4.0中,if..else语法非常类似于Java中的条件操作符。
在Java中,你使用“条件?stmnt1:stmnt2”。
在Angular 4.0中,你使用*ngIf="condition;then stmnt1 else stmnt2"。
所以,这实际上并没有使用ng-if,但许多建议似乎是处理在条件语句中编写文本。我认为这种方法是用最少的代码或复杂性来做到这一点的最好方法。你来评判吧。
<div>{{variable == null ? 'Testing1' : 'Testing2'}}<div>
OR
<div>{{variable == null ? var1 : var2 }}<div>
我所采用的方法是在组件中有两个标志,并为对应的两个标志设置两个ngif。
它是简单的,并与ng-template和材料不一起工作很好。