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

86 阅读 0 评论 57 点赞

我是靠谱客的博主刻苦绿茶，最近开发中收集的这篇文章主要介绍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>