ngfor ngif（ngif then else） ngswitch + ngfor里面使用ngif 和 ngswitch

ng是angular的内置命令，可以在HTML文件里实现简单的 if for switch逻辑。

一：先看下ngif：

<span *ngIf="switch">xxx金额:{{usableBonus | number:'1.2-2'}}元; </span>

ngif； then

<div *ngIf="col.field=='useSubsidy'; then thenBlock else elseBlock " ></div> <ng-template #thenBlock> {{carData.useSubsidy|USE_SUBSIDY_PIP}} </ng-template> <ng-template #elseBlock> {{carData[col.field]}} </ng-template>

二 ：ngswitch:

当出现多个if 条件，可以考虑用ngsiwtch

<div [ngSwitch]="col.field"> <div *ngSwitchCase="'shipConditionCode'"> {{carData.shipConditionCode}}</div> <div *ngSwitchCase="'status'"> {{carData.status}}</div> <div *ngSwitchCase="'loanStatus'"> {{carData.status}}</div> <div *ngSwitchDefault> {{carData}}</div> </div>

三 ngfor 里面使用ngif ngswitch

/这里我们实现把list里面的内容for循环填到表格table里面 可以参考 primeNG官网的代码。 https://www.primefaces.org/primeng/v4.3.0/#/datatable/coltoggler

// 用let指定变量的名字 <ng-template pTemplate="body" let-carData let-rowIndex="rowIndex" let-columns="columns"> <tr [pSelectableRow]="carData" [pSelectableRowIndex]="rowIndex"> // 刚才指定的变量名columns ，slice表示从下标1开始循环，（跳过第零个） <ng-container *ngFor="let col of columns | slice:1"> <td style="text-align: center" title="{{carData[col.field]}}"> <div [ngSwitch]="col.field"> <div *ngSwitchCase="'status'"> {{carData.status}}</div> <div *ngSwitchCase="'loanStatus'"> {{carData.status}}</div> <div *ngSwitchDefault> {{carData[col.field]}}</div> </div> // ngif 这里的ngif 需要用ng-container加个套子 <ng-container *ngIf="col.field == 'dealerCode' "> <br/>{{carData.dealerShortName}}</ng-container> </td> </ng-container> </tr> </ng-template>