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

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

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

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


当前回答

<div *ngIf="show; else elseBlock">Text to show</div>
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>

其他回答

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

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

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

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实例化。

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