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 相关文章推荐
一个基于jquery的图片切换效果
Jul 06 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
js控制input框只读实现示例
Jan 20 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 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
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
公司会计主管岗位责任制
2014/03/01 职场文书
工作决心书范文
2014/03/11 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
团购业务员岗位职责
2014/03/15 职场文书
搞笑征婚广告词
2014/03/17 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
清明节随笔
2015/08/15 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
如何用python清洗文件中的数据
2021/06/18 Python