如何使用*ngIf else？

Question

我正在使用Angular,我希望*ngIf else在此示例中使用(自版本4起可用):

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

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

我怎样才能实现同样的行为ngIf else？

Answer 1

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

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

Answer 2

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

1. 只需使用If

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

2. 使用If with Else(请注意templateName)

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

3. 使用If with Then(请注意templateName)

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

4. 使用If with 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计算表达式,然后 在表达式分别为truthy或falsy时将then或else模板呈现在其位置.通常是:

• 然后 template是ngIf的内联模板,除非绑定到不同的值.
• 除非绑定,否则else模板为空.

Answer 3

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

Answer 4

为了使用observable,如果可观察数组由数据组成,我通常会这样做.

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

Answer 5

只需添加来自 Angular 8 的新更新。

1. 对于 if 和 else 的情况，我们可以使用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>

2. 对于 if 和 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>

3. 对于 if 与 then 和 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 6

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

来源来自Angular 的 NgIf 和 Else 语法。

Answer 7

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

现场演示

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

Answer 8

如果 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 9

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

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

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

或者

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

Answer 11

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

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

Answer 12

ngIf / Else的语法

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

使用NgIf / Else / Then显式语法

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

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

NgIf和异步管道的可观察对象

更多细节

Answer 13

在 HTML 标签或模板上使用if条件有两种可能性：

1. *来自 CommonModule 的 ngIf 指令，位于 HTML 标签上；
2. 如果别的

Answer 14

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

Answer 15

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

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

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

Answer 16

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

以前的例子：

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

ngif模板

ngif角4

Answer 17

ng-template

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


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

Answer 18

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