如何在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程序：
-
只是使用如果
<div *ngIf="isValid"> your content </div> -
如果使用其他 （请注意templateName ）
<div *ngIf="isValid; else templateName"> your Content </div> <ng-template #templateName> your content </ng-template> -
如果使用然后 （请注意templateName ）
<div *ngIf="isValid; then templateName"> your Content </div> <ng-template #templateName> your content </ng-template> -
如果用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式为真或伪造时将then或else模板呈现在其位置。 通常情况下：
- 那么 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>
