Angular 4.x NgIf

ngIf 指令用于根据表达式的值，在指定位置渲染 then 或 else 模板的内容。

• then 模板除非绑定到不同的值，否则默认是 ngIf 指令关联的内联模板。
• else 模板除非绑定对应的值，否则默认是 null。

使用ngIf

此时判断表达式的布尔值，控制元素的显影

<!--语法糖-->
<div *ngIf="condition">...</div>
<!--Angular 2.x中使用template-->
<ng-template [ngIf]="condition"><div>...</div></ng-template>

使用else块

此时如果condition的值为true时，显示当前元素的内容，否则显示elseBlock模版。

<div *ngIf="condition; else elseBlock">...</div>
<ng-template #elseBlock>...</ng-template>

使用then和else块

此时如果condition的值为true时，显示thenBlokc模版的内容，否则显示elseBlock模版。

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

NgIf 使用示例

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  toggleFlag1= true;
  toggleFlag2= true;
  toggleFlag3= true;
  
  onToggle1() {
      this.toggleFlag1 = (this.toggleFlag1 === true)? false : true;
  }
  onToggle2() {
      this.toggleFlag2 = (this.toggleFlag2 === true)? false : true;
  }
  onToggle3() {
      this.toggleFlag3 = (this.toggleFlag3 === true)? false : true;
  }  

}

app.component.html

<h3>ng-template with ngIf</h3>
<button type="button" (click)="onToggle1()">Toggle</button>

<ng-template [ngIf]= "toggleFlag1" >
   <div>Hello World!</div>
</ng-template>

<h3>ng-template with ngIf-else</h3>

<button type="button" (click)="onToggle2()">Toggle</button>

<div *ngIf="toggleFlag2; else msgElseBlock" >
   <div>Hello World!</div>
</div>

<ng-template #msgElseBlock>
   <div>Else Block: Hello World! </div>
</ng-template>

<h3>ng-template with ngIf-then-else</h3>

<button type="button" (click)="onToggle3()">Toggle</button>

<div *ngIf="toggleFlag3; then thenBlock else elseBlock">

</div>
<ng-template #thenBlock>
    <div>Then Block: Hello World!</div>
</ng-template>
<ng-template #elseBlock>
    <div>Else Block: Hello World!</div>
</ng-template>