协慌网

我正在使用 Angular，并且*ngIf else （自版本 4 起可用）：

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

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

ngIf else实现相同的行为？

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

演示：

柱塞

细节：

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

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

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

1. 只是使用如果

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

2. 将If 与 Else 一起使用（请注意templateName ）

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

3. 将If 与 Then 一起使用（请注意templateName ）

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

4. 将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>

提示： ngIf会对表达式求值，然后在表达式分别为真或假时分别渲染 then或else 模板。通常是：

• 那么除非绑定到其他值，否则template 是 ngIf的内联模板。
• 否则，除非绑定模板，否则模板为空白。

为了使用可观察的对象，如果可观察的数组包含数据，这就是我通常要显示的内容。

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