Angular 条件渲染

  Angular 条件渲染采用 ngif 属性来设置，以下展示详细演示：

IF 条件渲染

  当条件为真的时候渲染元素或者数据。

<div *ngIf="true">条件为真！</div>
<div *ngIf="false">条件为假！</div>

  定义模板： 这里可以为渲染的目标元素定义成一个模板，代码如下所示：

<div *ngIf="true;then thenTemplate;"></div>
<ng-template #thenTemplate>
  <div>条件为真！</div>
</ng-template>

IF-ELSE 条件渲染

  当条件为真是渲染元素 A ，当条件不成立是去渲染元素 B 。

<div *ngIf="false;else elseTemplate;">
  <div>条件为真！</div>
</div>
<ng-template #elseTemplate>
  <div>条件为假！</div>
</ng-template>

  同样的，不论是真还是假，都可以定义模板元素。