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

超文本标记语言<template>元素是一种保存客户端的机制加载页面时不会呈现但可能会显示的内容随后在运行时使用JavaScript实例化。

在Angular 4.0if..else中，语法与Java中的条件运算符非常相似。

在Java你使用"condition?stmnt1:stmnt2"。

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

“bindEmail”将检查电子邮件是否可用。如果电子邮件确实存在，则会显示注销。否则将显示登录。

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

为了使用observable，如果observable数组由数据组成，我通常会这样做来显示。

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

在Angular 4. x. x中

您可以通过四种方式使用ngif来实现简单的如果-否则过程：

1. 只需使用如果

   <div *ngIf="isValid">If isValid is true</div>

2. 使用如果与其他（请注意模版名称）

   <div *ngIf="isValid; else templateName">If isValid is true</div>
   <ng-template #templateName>If isValid is false</ng-template>

3. 使用如果与然后（请注意模版名称）

   <div *ngIf="isValid; then templateName">Here is never showing</div>
   <ng-template #templateName>If isValid is true</ng-template>

4. 使用如果与然后和其他

   <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计算表达式，然后渲染然后或当表达式分别为true或false sy时，模板在其位置。

通常是：

• 然后模板是ngif的内联模板，除非绑定到不同的值。
• 否则模板是空白的，除非它是绑定的。

一个ngif表达式的结果值不仅仅是布尔值true或false。

如果表达式只是一个对象，它仍然将其评估为真实性。

如果对象未定义或不存在，则ngif将其评估为假。

常见的用法是如果一个对象加载，存在，然后显示这个对象的内容，否则显示“加载……”。

 <div *ngIf="!object">Still loading...........</div>
<div *ngIf="object"><!-- the content of this object -->
object.info, object.id, object.name ... etc.</div>

另一个例子：

  things = {car: 'Honda',shoes: 'Nike',shirt: 'Tom Ford',watch: 'Timex'};
<div *ngIf="things.car; else noCar">Nice car!</div>
<ng-template #noCar>Call a Uber.</ng-template>
<!-- Nice car ! -->

另一个例子：

<div *ngIf="things.car; let car">Nice \{\{ car }}!</div><!-- Nice Honda! -->

ngif模板

ngif Angular 4

<div *ngIf="this.model.SerialNumber != '';then ConnectedContent else DisconnectedContent" class="data-font">    </div>
<ng-template #ConnectedContent class="data-font">Connected</ng-template><ng-template #DisconnectedContent class="data-font">Disconnected</ng-template>

在Angular 4,5和6中

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

可能的语法¹是：

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

来源：

1. NgIF-指令
2. 模板语法

我使用的方法是在组件中使用两个标志，并为相应的两个标志使用两个ngIfs。

它很简单，与材料一起工作，因为ng模板和材料不能很好地协同工作。

ngIF/Else的语法

<div *ngIf=”condition; else elseBlock”>Truthy condition</div><ng-template #elseBlock>Falsy condition</ng-template>

使用NgIF/Else/然后显式语法

要添加然后模板，我们只需要显式地将其绑定到模板。

<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div><ng-template #thenBlock>Then template</ng-template><ng-template #elseBlock>Else template</ng-template>

使用NgIF和异步管道的可观察对象

更多详情

在超文本标记语言或模板上使用如果条件有两种可能：

1. *ngIF指令从通用模块，超文本标记语言标签；
2. 如果-否则

您还可以在Angular中使用JavaScript短三元条件运算符?，如下所示：

\{\{doThis() ? 'foo' : 'bar'}}

或

<div [ngClass]="doThis() ? 'foo' : 'bar'">

ng-template

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

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

对于角9/8

Source链接与示例

    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和其他

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

3）*ngIF，然后和其他

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

您可以使用<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 Live演示：

现场演示

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

1. 对于case if，我们可以使用ngif和还有呢。

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

2. 对于case if with that，我们可以使用ngif和ngIf然后。

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

3. 对于case if，我们可以使用ngif、ngIf然后和还有呢。

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

<div *ngIf="show; else elseBlock">Text to show</div><ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>

以下是Angular的NgIF和使用else语句的一些漂亮而干净的语法。简而言之，你将在元素上声明元素参考，然后在else块中引用它：

<div *ngIf="isLoggedIn; else loggedOut">Welcome back, friend.</div>
<ng-template #loggedOut>Please friend, login.</ng-template>

我从NgIF，其他，然后中取了这个例子，我发现它解释得很好。

它还演示了使用<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>

来源取自这里是Angular的NgIF和Else语法。

如果isShow为true，则执行第一行，否则执行第二行，因为其他区块展示用作引用变量。

<div *ngIf="isShow; else elseBlockShow">Text to show for If</div><ng-template #elseBlockShow>Text to show for else block</ng-template>

所以，这实际上并没有使用ng-if，但许多建议似乎处理在条件语句中编写文本。我认为这种方式是以最少的代码或复杂性做到这一点的最佳方式。你来判断。

<div>\{\{variable == null ? 'Testing1' : 'Testing2'}}<div>OR<div>\{\{variable == null ? var1 : var2 }}<div>