Angular 4.x NgIf

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

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

使用ngIf

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

...

...

使用else块

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

...
...

使用then和else块

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

...
...

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

ng-template with ngIf
Toggle


   
Hello World!


ng-template with ngIf-else

Toggle


   
Hello World!



   
Else Block: Hello World! 


ng-template with ngIf-then-else

Toggle





    
Then Block: Hello World!


    
Else Block: Hello World!