Angular指令 *ngIf else 使用

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

在我们的实际业务中可能遇到这样的需求，一个 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 js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
大家好,我是IT修真院郑州分院第七期的学员冯亚超,一枚正直纯洁善良的WEB程序员今天给大家分享一下,题目angular js 常用指令ng-if.ng-class.ng-option.ng-valu ...
Angular指令 - 何时以及如何使用编译，控制器，预链接和后链接[关闭]
本文翻译自:Angular directives - when and how to use compile, controller, pre-link and post-link [closed] ...
angular 指令
Angular 指令的不同类型如下: 组件 -- 带有模板的指令.这种指令类型是最常见的指令类型. 属性型指令 -- 更改元素.组件或其他指令的外观或行为的指令. 结构型指令 -- 通过添加和删除 D ...
angular指令：tm.tags添加/删除标签
一个添加删除标签angular指令: 在网上找了几个标签插件都不是angular的,而且过于庞大,最小的也要30kb还引用了其他样式. 最后实在受不了自己写了,花4个小时找插件,最后自己2小时写完了. ...
angular指令心得（ng-model）
angular指令心得(ng-model) 在项目中编写指令,常常会依赖其他的指令来实现想要达到的功能,其中最常用到的便是ng-model,它为我们明确了需要绑定的属性,虽然在指令中可以通过通过使用独 ...
Angular指令渗透式理解
通过一段时间对angular指令的使用,理解了angular指令的意义,下面逐一介绍一下. ng-app:定义一个angualr模块,表示angular作用的范围,如下代码: ng-app在html标 ...
前端学习（2335）：angular之内置结构指令ngif
child.html <p>child4 works!</p><div class="us">我是歌谣</div> <div ...
angular（使用Angular指令）
一.设计模式所谓的设计模式就是一套被反复使用的,多数人知道的,经过分类编写的,代码设计经验的总结,使用设计模式可以提高代码的重用性和可读性. 1.设计模式分类单例模式.代理模式.观察者模式.MVC ...
Angular 的 ngIf 和 NgIf 有何区别
在Angular官方文档里,可以看到ngIf和NgIf这两种拼写混杂使用. NgIf 指的是指令类: ngIf 指的是指令的属性名称. 指令类以 UpperCamelCase (NgIf) 拼写. 指 ...

Angular指令 *ngIf else 使用

Angular指令 *ngIf else 使用相关推荐

最新文章

热门文章