我使用的是Angular,我想在这个例子中使用*ngIf else(从版本4开始可用):

<div *ngIf="isValid">
  content here ...
</div>

<div *ngIf="!isValid">
 other content here...
</div>

我怎样才能用ngIf else实现同样的行为?


当前回答

要使用可观察对象,如果可观察对象数组由数据组成,我通常会这样显示。

<div *ngIf="(observable$ | async) as listOfObject else emptyList">
   <div >
        ....
    </div>
</div>
 <ng-template #emptyList>
   <div >
        ...
    </div>
</ng-template>

其他回答

在HTML标签或模板上使用if条件有两种可能:

*ngIf指令来自CommonModule,在HTML标签上; if - else

<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>

还可以使用JavaScript的短三元条件运算符吗?在Angular中是这样的:

{{doThis() ? 'foo' : 'bar'}}

or

<div [ngClass]="doThis() ? 'foo' : 'bar'">

要使用可观察对象,如果可观察对象数组由数据组成,我通常会这样显示。

<div *ngIf="(observable$ | async) as listOfObject else emptyList">
   <div >
        ....
    </div>
</div>
 <ng-template #emptyList>
   <div >
        ...
    </div>
</ng-template>

在Angular 4.0中,if..else语法非常类似于Java中的条件操作符。

在Java中,你使用“条件?stmnt1:stmnt2”。

在Angular 4.0中,你使用*ngIf="condition;then stmnt1 else stmnt2"。