angular 指令渲染_【Angular】内置指令ngIf和ngSwitch

ngIf

判断表达式指令，如果表达式的结果返回的是一个假值，那么元素会从DOM上被移除。

示例：

<p *ngIf="true">showp>
 <p *ngIf="isShow">hidep>
 <p template="ngIf true">这是 ngIF 判断是否显示p>

ngSwitch

根据一个给定的条件来渲染不同的元素，可以使用ngSwitch.

<ul [ngSwitch]="status">
  <li *ngSwitchCase="1">已支付li>
  <li *ngSwitchCase="2">订单已经确认li> 
  <li *ngSwitchCase="3">已发货li>
  <li *ngSwitchDefault>无效li>
ul>

说明：

• 使用ngSwitchCase指令描述已知结果；

• 使用ngSwitchDefault指令处理所有其他未知情况

示例演示

在app.component.html中：

<h1&g