对于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和Else

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

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

3) *ngIf, Then和Else

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

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.0中，if..else语法非常类似于Java中的条件操作符。

在Java中，你使用“条件?stmnt1:stmnt2”。

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

如果isShow为真，则第一行执行，否则执行第二行，因为elseBlockShow作为引用变量。

<div *ngIf="isShow; else elseBlockShow">
  Text to show for If
</div>
<ng-template #elseBlockShow>
  Text to show for else block
</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现场演示:

现场演示

我所采用的方法是在组件中有两个标志，并为对应的两个标志设置两个ngif。

它是简单的，并与ng-template和材料不一起工作很好。