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>

ngfor ngif（ngif then else） ngswitch + ngfor里面使用ngif 和 ngswitch相关推荐

Angular数据循环 *ngFor 与条件判断 *ngif 和 *ngSwitch
Angular数据循环 *ngFor 与条件判断 *ngif 和 *ngSwitch 首先,进行Angular环境的搭建和项目创建 ctrl + c 结束服务 1.新建模块 ng g compone ...
angular学习-*ngFor,*ngIf,*ngSwitch
*ngFor,*ngIf,*ngSwitch学习记录 1.*ngFor 2.*ngIf 3.*ngSwitch 1.*ngFor 一般用于数据循环,例子(打印arr里边的值)如下: ts: html: ...
ng-container ng-for ng-if 数据类型
import {Component} from '@angular/core'@Component({selector:'demo03',template:`<h1>这是demo03< ...
Angular中ngfor与ngif的嵌套使用
ng2 结构指令不能直接嵌套使用,可以通过使用标签来包裹指令,两个结构指令分开放在两个标签中,解决冲突. <ul *ngFor="let value of item; let key ...
Angular 图片、条件判断（*ngIf、[ngSwitch]、属性[ngClass]、[ngStyle]）
1. Angular 图片.条件判断(*ngIf.[ngSwitch].属性[ngClass].[ngStyle]) 1.1 图片 1.1.1 本地图片: 我们在assets目录下面新建images文 ...
AngularJS ng-if使用
示例中,根据ng-if指令显示不同任务状态,以及判断任务是否可以操作 <div ng-app="NgifDemoApp" ng-controller="NgifDe ...
Angular中数据循环ngFor、条件判断ngIf、ngSwitch、执行事件(click)、表单事件(keyup)、ngClass、ngStyle的使用
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
Angular 的 ngIf 和 NgIf 有何区别
在Angular官方文档里,可以看到ngIf和NgIf这两种拼写混杂使用. NgIf 指的是指令类: ngIf 指的是指令的属性名称. 指令类以 UpperCamelCase (NgIf) 拼写. 指 ...
angular ：ngIf 的else用法
1.首先我们看一下 *ngIf的用法 <div *ngIf="display"> hello world </div> 在display为true 的时候, ...

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

一：先看下ngif：

二：ngswitch:

三 ngfor 里面使用ngif ngswitch

ngfor ngif（ngif then else） ngswitch + ngfor里面使用ngif 和 ngswitch相关推荐

最新文章

热门文章

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

一：先看下ngif：

二 ：ngswitch:

三 ngfor 里面使用ngif ngswitch

ngfor ngif（ngif then else） ngswitch + ngfor里面使用ngif 和 ngswitch相关推荐

最新文章

热门文章

二：ngswitch: