在Angular 4、5和6中

Question

我正在使用Angular，我希望在此示例中使用*ngIf else（自版本4起可用）：

<div *ngIf="isValid">
  content here ...
</div>

<div *ngIf="!isValid">
 other content here...
</div>

如何使用ngIf else实现相同的行为？

Answer 1

Angular 4 and 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的要求：

HTML <template>元素是一种用于保持客户端的机制加载页面时不会呈现的内容但可以随后在运行时使用JavaScript实例化。

Answer 2

在Angular 4.x.x中 您可以通过四种方式使用ngIf来实现简单的if else过程：

只需使用如果

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

使用如果还有（请注意 templateName ）

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

<ng-template #templateName>
    If isValid is false
</ng-template>

使用如果使用（请注意 templateName ）

<div *ngIf="isValid; then templateName">
    Here is never showing
</div>

<ng-template #templateName>
    If isValid is true
</ng-template>

使用如果使用Then和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 评估表达式，然后呈现然后或其他   当表达式分别为真或假时，模板就位于其中。   通常是：


然后模板是 ngIf 的内联模板，除非绑定到其他值。

其他模板除非已绑定，否则为空。

Answer 3

要使用observable，如果可观察数组由数据组成，这就是我通常要做的事情。

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

Answer 4

只需从Angular 8中添加新更新即可。

对于其他情况，我们可以使用 ngIf 和 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>

如果使用then，我们可以使用 ngIf 和 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>

如果使用then and else，我们可以使用 ngIf ， ngIfThen 和 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>

Answer 5

这里有一些关于 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>

来源来自here on Angular's NgIf and Else syntax。

Answer 6

“bindEmail”它会检查电子邮件是否可用。如果电子邮件存在，则Logout将显示，否则Login将显示

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

Answer 7

对于 Angular 8

来源Link 带有示例

    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）* ng如果是，则为其他

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

Answer 8

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

在Java中，您使用"condition?stmnt1:stmnt2"。

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

Answer 9

ngif表达式结果值不仅仅是布尔值true或false

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

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

常用的是如果一个对象加载，存在，则显示该对象的内容，否则显示“loading .......”。

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

anthoer示例：

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

ngif template

ngif angular 4

Answer 10

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

live demo

希望这会有所帮助... !!!

Answer 11

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

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

Answer 12

如果条件取决于HTML标记或模板，则有两种可能使用：

* ngIf指令；
如果不是

Answer 13

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和异步管道的可观测对象

For more details

Answer 14

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

Answer 15

在Angular 4、5和6中

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

可能的语法 ^[1]是：

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

来源：

Answer 16

您还可以使用Javascript短三元条件运算符吗？像这样的角度：

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

或

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

Answer 17

ng-template

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


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

Answer 18

我知道这已经有一段时间了，但是如果有帮助，请添加它。我使用的方法是在组件中具有两个标志，并为对应的两个标志提供两个ngIfs。

这很简单，并且与ng-template和材质不能很好地协同工作，因此可以很好地与材质配合使用。

Answer 19

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

如何使用* ngIf else？

19 个答案:

ngIf / Else的语法

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

带有NgIf和异步管道的可观测对象

在Angular 4、5和6中