angular *Ngif else用法详解

Angular 中常用的指令有用来遍历的 *ngFor 、控制元素显示隐藏的 *ngIf，今天学习一下 *ngIf 这个常用的指令。

NgIf 指令

ngIf 指令用于根据表达式的值，在指定位置渲染then 或 else 模板的内容。
then 模板除非绑定到不同的值，否则默认是 ngIf 指- 令关联的内联模板。
else 模板除非绑定对应的值，否则默认是 null。

简单形式

<div *ngIf="condition">...</div>
<!--Angular 2.x中使用template-->
<ng-template [ngIf]="condition"><div>...</div></ng-template>

else

 <div *ngIf="condition; else elseBlock">...</div>
 <ng-template #elseBlock>...</ng-template>

then 和 else

 <div *ngIf="condition; then thenBlock else elseBlock"></div>
 <ng-template #thenBlock>...</ng-template>
 <ng-template #elseBlock>...</ng-template>

在我们的实际业务中可能遇到这样的需求，一个 table 表格，最后一列有修改、删除或者其他操作，当我们点击修改按钮的时候，当前这一行的内容都出现在一个 input 输入框里面，然后我们可以直接进行修改，这个时候我们就可以使用 *ngIf 和 else 来实现。效果图如下：

部分实现代码：

<tr *ngFor="let item of gridList">
 <td *ngIf="item.bol; else inputid">{{item.id}}</td>
 <ng-template #inputid>
  <td class="insert"><input type="text" [value]="item.id"></td>
 </ng-template>
 ...
</tr>

这里的 inputid 可以理解为一个模板 id ，它指向 <ng-template #inputid> 这个模板，当 item.bol 为 false 时，angular就会找到这个模板里的内容进行替换。

注意这个模板 id 是唯一的，如果多次使用 *ngIf else 指令需要使用不同的 id。

到此这篇关于angular *Ngif else用法详解的文章就介绍到这了,更多相关angular *Ngif else内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Angular2 关于*ngFor 嵌套循环

    详解Angular2 关于*ngFor 嵌套循环

    在项目开发中拿到的数据是这样的,要循环遍历出来.可是在ng2中好像不能直接遍历Object datas: any = [ { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"}, { num: 1, date: "2017-04-12", sellNum: "1231234"

  • angular4中*ngFor不能对返回来的对象进行循环的解决方法

    解决方法:可以循环返回的对象,得到对象里每一个key所对应的值,然后把值放到自己定义的一个数组中. 例如: tipAttr: any = []; $.each(response.ipCustomer.tip, function(key, val) { console.log(val); self.tipAttr.push(val); return self.tipAttr; }); 以上这篇angular4中*ngFor不能对返回来的对象进行循环的解决方法就是小编分享给大家的全部内容了,希望能给

  • angular *Ngif else用法详解

    angular *Ngif else用法详解

    Angular 中常用的指令有用来遍历的 *ngFor .控制元素显示隐藏的 *ngIf,今天学习一下 *ngIf 这个常用的指令. NgIf 指令 ngIf 指令用于根据表达式的值,在指定位置渲染then 或 else 模板的内容. then 模板除非绑定到不同的值,否则默认是 ngIf 指- 令关联的内联模板. else 模板除非绑定对应的值,否则默认是 null. 简单形式 <div *ngIf="condition">...</div> <!--A

  • Angular resolve基础用法详解

    简介 为什么使用resolve: 当路由切换的时候,被路由的页面中的元素(标签)就会立马显示出来,同时,数据会被准备好并呈现出来.但是注意,数据和元素并不是同步的,在没有任何设置的情况下,AngularJS默认先呈现出元素,而后再呈现出数据.这样就会导致页面会被渲染两遍,导致"页面UI抖动"的问题,对用户不太友好.resolve的出现解决了这个问题. resolve是干嘛用的: resolve属性里的值会在路由成功前被预先设定好,然后注入到控制器中.通俗地将,就是等数据都"就

  • Angular 中 select指令用法详解

    最近在angular中使用select指令时,出现了很多问题,搞得很郁闷.查看了很多资料后,发现select指令并不简单,决定总结一下. select用法: <select ng-model="" [name=""] [required=""] [ng-required=""] [ng-options=""]> </select> 属性说明: 发现并没有ng-change属性 ng-

  • Require.js的基本用法详解

    一:什么是require.js ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染和其后的脚本的执行,并提供了在加载完成之后的执行相应回调函数的功能: ②:require.js要求js脚本必须要实现模块化,即文件化:而require.js的作用之一就是加载js模块,也就是js文件. ③:require.js可以管理js模块/文件之间的依赖;即不同的框架例如Jquery,Angul

  • Angular路由ui-router配置详解

    简介 angularJs自身提供路由ng-router,但是ng-router不是很好用,配置项零散,好比Vue提供的组件传值一样,虽然提供给你了用法,但是开发过程中逻辑一多用着萌萌的,所以我们抛开ng-router来看ui-router. 引入ui-router 我们可以去bootCDN搜索ui-router,本地创建js文件,将代码copy进去使用,这样就可以打入本地使用了,但是要注意的是,Angular的main.js一定要在ui-router之前引用,注意一下先后顺序问题. 例如: <s

  • Oracle中游标Cursor基本用法详解

    查询 SELECT语句用于从数据库中查询数据,当在PL/SQL中使用SELECT语句时,要与INTO子句一起使用,查询的 返回值被赋予INTO子句中的变量,变量的声明是在DELCARE中.SELECT INTO语法如下: SELECT [DISTICT|ALL]{*|column[,column,...]} INTO (variable[,variable,...] |record) FROM {table|(sub-query)}[alias] WHERE............ PL/SQL

  • JSP 中request与response的用法详解

    JSP 中request与response的用法详解 概要: 在学习这两个对象之前,我们应该已经有了http协议的基本了解了,如果不清楚http协议的可以看我的关于http协议的介绍.因为其实request和response的使用大部分都是对http协议的操作. request对象的介绍 我们先从request对象进行介绍: 我们知道http协议定义了请求服务器的格式: 请求行 请求头 空格 请求体(get请求没有请求体) 好了,这里我们就不详细介绍了,我们只看几个应用就可以了,没什么难度: 应

  • 基于C++中setiosflags()的用法详解

    cout<<setiosflags(ios::fixed)<<setiosflags(ios::right)<<setprecision(2); setiosflags 是包含在命名空间iomanip 中的C++ 操作符,该操作符的作用是执行由有参数指定区域内的动作:   iso::fixed 是操作符setiosflags 的参数之一,该参数指定的动作是以带小数点的形式表示浮点数,并且在允许的精度范围内尽可能的把数字移向小数点右侧:   iso::right 也是se

  • JSP中EL表达式的用法详解(必看篇)

    EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${为起始.以}为结尾的.上述EL范例的意思是:从Session的范围中,取得 用户的性别.假若依照之前JSP Scriptlet的写法如下: User user =(User)session.getAttribute("user"); String sex =user.getSex( );

  • OGNL表达式基本语法与用法详解

    一．OGNL中的#.%和$符号 #.%和$符号在OGNL表达式中经常出现,而这三种符号也是开发者不容易掌握和理解的部分.在这里我们简单介绍它们的相应用途. 1．#符号的三种用法 1)访问非根对象属性,例如示例中的#session.msg表达式,由于Struts 2中值栈被视为根对象,所以访问其他非根对象时,需要加#前缀.实际上,#相当于ActionContext. getContext():#session.msg表达式相当于ActionContext.getContext().getSessi

随机推荐