只需从Angular 8中添加新的更新。

For case if with else, we can use ngIf and ngIfElse. <ng-template [ngIf]="condition" [ngIfElse]="elseBlock"> Content to render when condition is true. </ng-template> <ng-template #elseBlock> Content to render when condition is false. </ng-template> For case if with then, we can use ngIf and ngIfThen. <ng-template [ngIf]="condition" [ngIfThen]="thenBlock"> This content is never showing </ng-template> <ng-template #thenBlock> Content to render when condition is true. </ng-template> For case if with then and else, we can use ngIf, ngIfThen, and ngIfElse. <ng-template [ngIf]="condition" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock"> This content is never showing </ng-template> <ng-template #thenBlock> Content to render when condition is true. </ng-template> <ng-template #elseBlock> Content to render when condition is false. </ng-template>

ng-template

<ng-template [ngIf]="condition1" [ngIfElse]="template2">
        ...
</ng-template>


<ng-template #template2> 
        ...
</ng-template>

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

你可以使用<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现场演示:

现场演示

要使用可观察对象，如果可观察对象数组由数据组成，我通常会这样显示。

<div *ngIf="(observable$ | async) as listOfObject else emptyList">
   <div >
        ....
    </div>
</div>
 <ng-template #emptyList>
   <div >
        ...
    </div>
</ng-template>

在Angular 4、5和6中

我们可以简单地创建一个模板引用变量2，并将其链接到*ngIf指令中的else条件

可能的语法是:

<!-- Only If condition -->
<div *ngIf="condition">...</div>
<!-- or -->
<ng-template [ngIf]="condition"><div>...</div></ng-template>


<!-- If and else conditions -->
<div *ngIf="condition; else elseBlock">...</div>
<!-- or -->
<ng-template #elseBlock>...</ng-template>

<!-- If-then-else -->
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>...</ng-template>
<ng-template #elseBlock>...</ng-template>


<!-- If and else conditions (storing condition value locally) -->
<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>...</ng-template>

演示: https://stackblitz.com/edit/angular-feumnt?embed=1&file=src/app/app.component.html

来源:

NgIf -指令 模板的语法