ngif表达式的结果值不只是布尔值true或false。

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

如果对象未定义或不存在，则ngif将其赋值为false。

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

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

恩吉夫角 4

要使用可观察对象，如果可观察对象数组由数据组成，我通常会这样显示。

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

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和Async Pipe的可观察对象

欲知详情

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

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

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

"bindEmail"将检查电子邮件是否可用。如果电子邮件存在，则登出将显示。否则将显示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>