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

*ngIf指令来自CommonModule，在HTML标签上; if - 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实例化。

在Angular 4.x.x中

你可以用四种方式使用ngIf来实现一个简单的if-else过程:

Just use If <div *ngIf="isValid"> If isValid is true </div> Using If with Else (please notice to templateName) <div *ngIf="isValid; else templateName"> If isValid is true </div> <ng-template #templateName> If isValid is false </ng-template> Using If with Then (please notice to templateName) <div *ngIf="isValid; then templateName"> Here is never showing </div> <ng-template #templateName> If isValid is true </ng-template> Using If with Then and Else <div *ngIf="isValid; then thenTemplateName else elseTemplateName"> Here is never showing </div> <ng-template #thenTemplateName> If isValid is true </ng-template> <ng-template #elseTemplateName> If isValid is false </ng-template>

提示:ngIf对表达式求值，然后呈现then或else 当表达式分别为真或假时，模板在其位置。 通常: 那么template就是ngIf的内联模板，除非绑定到不同的值。 除非绑定，否则模板为空白。

你可以使用<ng-container>和<ng-template>来实现:

<ng-container *ngIf="isValid; then template1 else template2"></ng-container>

<ng-template #template1>
     <div>Template 1 contains</div>
</ng-template>

<ng-template #template2>
     <div>Template 2 contains </div>
</ng-template>

你可以在下面找到StackBlitz现场演示:

现场演示

这里有一些关于Angular的NgIf和使用else语句的漂亮而干净的语法。简而言之，你将在元素上声明一个ElementRef，然后在else块中引用它:

<div *ngIf="isLoggedIn; else loggedOut">
   Welcome back, friend.
</div>

<ng-template #loggedOut>
  Please friend, login.
</ng-template>

我从NgIf, Else, Then中取了这个例子，我发现这个例子解释得很好。

它还演示了使用<ng-template>语法:

<ng-template [ngIf]="isLoggedIn" [ngIfElse]="loggedOut">
  <div>
    Welcome back, friend.
  </div>
</ng-template>

<ng-template #loggedOut>
  <div>
    Please friend, login.
  </div>
</ng-template>

并且使用<ng-container>如果这是你想要的:

<ng-container
  *ngIf="isLoggedIn; then loggedIn; else loggedOut">
</ng-container>

<ng-template #loggedIn>
  <div>
    Welcome back, friend.
  </div>
</ng-template>
<ng-template #loggedOut>
  <div>
    Please friend, login.
  </div>
</ng-template>

Source来自Angular的NgIf和Else语法。

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