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

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

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

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

11 回答

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

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

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

常用的是如果一个对象加载，存在，则显示该对象的内容，否则显示“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

回复于 2024-05-03T09:47:38+08:00

In Angular 4.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 with Then （请注意 templateName ）

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

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

使用 If with Then and 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计算表达式，然后在表达式分别为真或假时将then或else模板呈现在其位置 . 通常，：then模板是ngIf的内联模板，除非绑定到不同的值 . 除非绑定，否则else模板为空 .

回复于 2024-05-03T09:47:38+08:00

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

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

回复于 2024-05-03T09:47:38+08:00

116

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和Async管道的Observable

For more details

回复于 2024-05-03T09:47:38+08:00

663

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

回复于 2024-05-03T09:47:38+08:00

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

DEMO: https://stackblitz.com/edit/angular-feumnt?embed=1&file=src/app/app.component.html

Sources:

回复于 2024-05-03T09:47:38+08:00

11
如果HTML标记或模板上有条件，则有两种可能性：

来自CommonModule的
- ngIf指令，HTML标签;
- if-else
回复于 2024-05-03T09:47:38+08:00

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>

Demo :

Plunker

Details:

<ng-template> ：是Angular自己实现的 <template> 标签，根据MDN：

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

回复于 2024-05-03T09:47:38+08:00

0

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

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

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

回复于 2024-05-03T09:47:38+08:00
0

我知道这已经有一段时间了，但是如果有帮助就想添加它 . 我采用的方法是在组件中有两个标志，两个ngIfs用于相应的两个标志 .

由于ng-template和材料不能很好地协同工作，因此它非常简单并且与材料配合得很好 .

回复于 2024-05-03T09:47:38+08:00

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

回复于 2024-05-03T09:47:38+08:00

如何使用* ngIf else？

11 回答

ngIf / Else的语法

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

使用NgIf和Async管道的Observable

在Angular 4,5和6中

相关问题