angular *Ngif else用法详解


Posted in Javascript onDecember 15, 2020

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 输入框里面,然后我们可以直接进行修改,这个时候我们就可以使用 *ngIfelse 来实现。效果图如下:

angular *Ngif else用法详解

angular *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.bolfalse 时,angular就会找到这个模板里的内容进行替换。

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

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

Javascript 相关文章推荐
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
js比较日期大小的方法
May 12 Javascript
javascript检测两个数组是否相似
May 19 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
jQuery返回定位插件详解
May 15 jQuery
Angular利用trackBy提升性能的方法
Jan 26 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 #Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 #Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 #Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 #Vue.js
8个非常实用的Vue自定义指令
Dec 15 #Vue.js
JavaScript中Object、map、weakmap的区别分析
Dec 15 #Javascript
JavaScript中遍历的十种方法总结
Dec 15 #Javascript
You might like
一段php加密解密的代码
2007/07/16 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
如何设置mysql允许外网访问
2013/06/04 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
Linux常见面试题
2013/03/18 面试题
兼职业务员岗位职责
2014/01/01 职场文书
打架检讨书300字
2014/02/02 职场文书
水电工岗位职责
2014/02/12 职场文书
优秀经理获奖感言
2014/03/04 职场文书
文明之星事迹材料
2014/05/09 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
党建工作整改措施
2014/10/28 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python
Python循环之while无限迭代
2022/04/30 Python