如何使用* ng

本文翻译自：How to use *ngIf else?

I'm using Angular and I want to use *ngIf else (available since version 4) in this example: 我正在使用Angular，并且在此示例中我想使用*ngIf else （自版本4起可用）：

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

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

How can I acheive the same behavior with ngIf else ? 如何使用ngIf else实现相同的行为？

---

#1楼

参考：https://stackoom.com/question/2uRy2/如何使用-ng

---

#2楼

Angular 4 and 5 : 角度4和5 ：

using else : 使用else ：

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

<ng-template #other_content>other content here...</ng-template>

you can also use then else : 您还可以使用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>

or then alone : 或then独自：

<div *ngIf="isValid;then content"></div>    
<ng-template #content>content here...</ng-template>

Demo : 演示：

Plunker 柱塞

Details: 细节：

<ng-template> : is Angular's own implementation of the <template> tag which is according to MDN : <ng-template> ：是Angular自己根据MDN实现的<template>标签的实现：

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

---

#3楼

In Angular 4.0 if..else syntax is quite similar to conditional operators in Java. 在Angular 4.0中， if..else语法与Java中的条件运算符非常相似。

In Java you use to "condition?stmnt1:stmnt2" . 在Java中，您可以使用"condition?stmnt1:stmnt2" 。

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

---

#4楼

"bindEmail" it will check email is available or not. “ bindEmail”，它将检查电子邮件是否可用。 if email is exist than Logout will show otherwise Login will show 如果存在电子邮件，则显示“注销”，否则显示“登录”

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

---

#5楼

To work with observable, this is what I usually do to display if the observable array consists of data. 要使用可观察的对象，这是我通常在可观察的数组包含数据的情况下显示的内容。

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

---

#6楼

In Angular 4.xx You can use ngIf in four way to achieve simple if else procedure: 在Angular 4.xx中，您可以通过四种方式使用ngIf来实现简单的if else过程：

1. Just Use If 只是使用如果

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

2. Using If with Else (Please notice to templateName ) 在其他情况下使用If （请注意templateName ）

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

3. Using If with Then (Please notice to templateName ) 将If与Then一起使用（请注意templateName ）

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

4. Using If with Then and Else 将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 expression is truthy or falsy respectively. 提示： ngIf会对表达式求值，然后在表达式分别为真或假时分别渲染then或else模板。 Typically the: 通常是：

• then template is the inline template of ngIf unless bound to a different value. 那么除非绑定到其他值，否则template是ngIf的内联模板。
• else template is blank unless it is bound. 否则，除非绑定模板， 否则模板为空白。