如何在Angular 4中使用* ngIf?

我正在使用angular4,我想在这个例子中使用*ngIf else

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

我怎么能用ngIf else实现相同的行为呢?

Angular 4.0.0 final:

使用else

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

演示:

Plunker

细节:

<ng-template> :是Angular根据MDN自己实现的<template>标签:

HTML <template>元素是一种保存客户端内容的机制,在加载页面时不会呈现,但可能随后在运行时使用JavaScript实例化。

在Angular 4.xx中你可以用四种方法实现简单的if else程序:

  1. 只是使用如果

     <div *ngIf="isValid"> your content </div> 
  2. 如果使用其他 (请注意templateName

     <div *ngIf="isValid; else templateName"> your Content </div> <ng-template #templateName> your content </ng-template> 
  3. 如果使用然后 (请注意templateName

     <div *ngIf="isValid; then templateName"> your Content </div> <ng-template #templateName> your content </ng-template> 
  4. 如果用Then和Else

     <div *ngIf="isValid; then thenTemplateName; else elseTemplateName"> your Content ignored </div> <ng-template #thenTemplateName> your content </ng-template> <ng-template #elseTemplateName> your content </ng-template> 

提示: ngIf计算expression式 ,然后分别在expression式为真或伪造时将thenelse模板呈现在其位置。 通常情况下:

  • 那么 template是ngIf的内联模板,除非绑定到不同的值。
  • 否则模板是空白的,除非它是绑定的。

要使用observable,如果可观察数组由数据组成,通常我会这样做。

 <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中,您使用"condition?stmnt1:stmnt2"

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

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