Angular 4 和 5 :

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

或者单独使用 then :

<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>

演示:

Plunker

详细信息:

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

The HTML <template> element is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.

在 Angular 4.x.x 中

您可以通过四种方式使用 ngIf 来实现简单的 if - else 过程：

1. 只需使用 If

   <div *ngIf="isValid">
   如果 isValid 为 true
   </div>
   

2. 将 If 与 Else 结合使用（请注意 templateName ）

   <div *ngIf="isValid; else templateName">
   如果 isValid 为 true
   </div>
   
   <ng-template #templateName>
   如果 isValid 为 false
   </ng-template>
   

3. 使用 If 和 Then （请注意 templateName ）

   <div *ngIf="isValid; then templateName">
   这里永远不会显示
   </div>
   
   <ng-template #templateName>
   如果 isValid 为 true
   </ng-template>
   

4. 使用 If 和 Then 以及 Else

   <div *ngIf="isValid; then thenTemplateName else elseTemplateName">
   这里永远不会显示
   </div>
   
   <ng-template #thenTemplateName>
   如果 isValid 为 true
   </ng-template>
   
   <ng-template #elseTemplateName>
   如果 isValid 为 false
   </ng-template>
   

Tip: ngIf evaluates the expression and then renders the then or else template in its place when the expression is truthy or falsy respectively.

Typically the:

• then template is the inline template of ngIf unless bound to a different value.
• else template is blank unless it is bound.

适用于 Angular 9/8

来源 链接 带有示例

    export class AppComponent {
      isDone = true;
    }

1) *ngIf

    <div *ngIf="isDone">
      It's Done!
    </div>

    <!-- Negation operator-->
    <div *ngIf="!isDone">
      It's Not Done!
    </div>

2) *ngIf and Else

    <ng-container *ngIf="isDone; else elseNotDone">
      It's Done!
    </ng-container>

    <ng-template #elseNotDone>
      It's Not Done!
    </ng-template>

3) *ngIf, Then and否则

    <ng-container *ngIf="isDone;  then iAmDone; else iAmNotDone">
    </ng-container>

    <ng-template #iAmDone>
      It's Done!
    </ng-template>

    <ng-template #iAmNotDone>
      It's Not Done!
    </ng-template>