如何使用“*ngIf else”？

Question

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

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

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

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

Answer 1

Angular 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> 标签，即 according to MDN:

The HTML <template> element is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.

Answer 2

在 Angular 4.0 中 if..else 语法与 Java.

中的条件运算符非常相似

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

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

Answer 3

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

Answer 4

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

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

Answer 5

在Angular4.x.x

您可以通过四种方式使用ngIf来实现一个简单的if-else过程：

就用If

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

使用 If with Else（请注意 templateName）

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

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

使用 If 和 Then（请注意 templateName）

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

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

使用 If 与 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>

Tip: ngIf evaluates the expression and then renders the then or else template in its place when the expression is truthy or falsy respectively.

Typically the:

then template is the inline template of ngIf unless bound to a different value.

else template is blank unless it is bound.

Answer 6

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 template

ngif Angular 4

Answer 7

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

Answer 8

在 Angular 4、5 和 6

我们可以简单的创建一个模板引用变量²和link里面的else条件*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

来源：

NgIf - directive
Template syntax

Answer 9

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

它很简单并且与 material 一起工作得很好，因为 ng-template 和 material 不能一起工作。

Answer 10

ngIf/Else

的语法

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

使用 NgIf / Else/ Then 显式语法

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

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

使用 NgIf 和异步管道的 Observable

For more details

Answer 11

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

*来自 CommonModule 的 ngIf 指令，在 HTML 标签上；
如果-其他

Answer 12

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

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

或

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

Answer 13

ng-template

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


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

Answer 14

对于Angular 9/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 和 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 15

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

Answer 16

只需添加来自 Angular 8.

的新更新

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

如果有 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 和 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 17

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

Answer 18

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

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

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

如何使用“*ngIf else”？

How can I use "*ngIf else"?

if-statement

angular-template

angular

在 Angular 4、5 和 6

ngIf/Else

使用 NgIf / Else/ Then 显式语法

使用 NgIf 和异步管道的 Observable