angular4 数据绑定
HTML属性绑定
1.基本Html属性绑定
- <td [attr.colspan]="tableColspan">something</td>
2.css类绑定
- <div [class]="someEle">something</div>
- <div class="aaa,bbb" [class.ccc]="isSpec">something</div>
- <div [ngClass]="{aaa:isA,bbb:isB}">something</div>
3.样式绑定
- <button [style.color]="ispec ? 'red' : 'green'">something</button>
数据绑定
HTML属性和DOM属性的关系
1.少量html属性和DOM属性之间有着1:1的映射,如id
2.有些HTML属性没有对应的DOM属性,如 colspan
3.有些DOM属性没有对应的HTML属性,如 textContent
4.就算名字相同,html属性和DOM属性也不是同样的东西
5.HTML属性的值指定了初始值;DOM属性的值表示当前值。
DOM属性的值可以改变;HTML属性的值不能改变
6.模板绑定是通过DOM属性和事件来工作的,而不是HTML属性
angular4 数据绑定的更多相关文章
- Angular4.0从入门到实战打造在线竞拍网站学习笔记之四--数据绑定&管道
Angular4.0基础知识之组件 Angular4.0基础知识之路由 Angular4.0依赖注入 数据绑定 数据绑定允许你将组件控制器的属性和方法与组件的模板连接起来,大大降低了开发时的编码量. ...
- Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定
Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...
- angular4.0中form表单双向数据绑定正确姿势
issue:用[(ngModel)]="property"指令双向数据绑定,报错. reason1:使用ngModel绑定数据需要注入FormsModule模块,在app.modu ...
- Angular4学习笔记(五)- 数据绑定、响应式编程和管道
概念 Angular中的数据绑定指的是同一组件中控制器文件(.ts)与视图文件(.html)之间的数据传递. 分类 流向 单向绑定 它的意思是要么是ts文件为html文件赋值,要么相反. ts-> ...
- angular4自定义组件非input元素实现ngModel双向数据绑定
在angular里我们一般都是给input元素添加[(ngModel)]="value"实现数据双向绑定,如果想实现自定义的组件上实现ngModel双向数据绑定应该怎么办呐... ...
- angular4+中的数据绑定
1,基本的属性绑定,下面的两种形式是一样的 2.dom属性和html属性 3.两者关系的进一步总结 4.dom属性绑定 5.html属性绑定
- AngularJs学习笔记2-控制器、数据绑定、作用域
上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习,可以学习2.0开始学习,我也知道1.x无论是从性能还是架构上都没有2.x好,但是我想因为现在也有一些朋友还在用1.x版本,因为1. ...
- Angular4.0学习笔记 从入门到实战打造在线竞拍网站学习笔记之二--路由
Angular4.0基础知识见上一篇博客 路由 简介 接下来学习路由的相关知识 本来是不准备写下去的,因为当时看视频学的时候感觉自己掌握的不错 ( 这是一个灰常不好的想法 ) ,过了一段时间才发现An ...
- Angular4.0从入门到实战打造在线竞拍网站学习笔记之三--依赖注入
Angular4.0基础知识之组件 Angular4.0基础知识之路由 依赖注入(Dependency Injection) 正常情况下,我们写的代码应该是这样子的: let product = ne ...
随机推荐
- 亚马逊 amazon connect(呼叫中心)
背景 公司为提高客服部门沟通效率对接电话呼叫中心,调研后选择了亚马逊的Amazon Connect服务,因为是国外业务没有选择用阿里云,怕有坑. Amazon Connect后台 需要在后台创建“联系 ...
- (办公)TOKEN
token就是HTTP认证,输入正确的token,在放在Authorization header中发送给服务器,认证成功.,就可以正确的拿到接口数据. 举个例子: 第一步: 客户端发送http re ...
- npm缺少css-loader,/style-compiler,stylus-loader问题,npm没有权限无法全局更新问题【已解决】
ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":tru ...
- Linux命令大全 欢迎补充 评论添加~
系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMB ...
- 实现MongoDB读写分离的“读偏好”介绍
在某些情况下,将读请求发送给副本集的备份节点是合理的,例如,单个服务器无法处理应用的读压力,就可以把查询请求路由到可复制集中的多台服务器上.现在绝大部分MongoDB驱动支持读偏好设置(read pr ...
- PGSQL-通过SQL语句来计算两个日期相差的天数
这是本人第一次写的~我在某次需求中遇到一个问题,如何在SQL语句中计算出两个日期的天数,然后用那个结果来进行数据的筛选呢?通过网上查阅了资料发现 date_part('day', cast(time1 ...
- 伙伴系统之伙伴系统概述--Linux内存管理(十五)
在内核初始化完成之后, 内存管理的责任就由伙伴系统来承担. 伙伴系统基于一种相对简单然而令人吃惊的强大算法. Linux内核使用二进制伙伴算法来管理和分配物理内存页面, 该算法由Knowlton设计, ...
- C# groupby 应用小技巧
这两天感冒了,导致大脑无法有效运转,一个朋友问我,groupby 怎么给list 分组,然后再将其中一个字段组合起来,恩,觉得很简单,结果才发现,自己的脑子真的是不够用了: 恩,其实是想写其他的,但是 ...
- 算法"新"名词
这个“新”是对于自己而言. 最近几天接触到很多新的名词,如: 回溯法(backtracking):以前知道,但很少用 动态规划(dynamic programming):序列型.矩阵型.区间型.背包等 ...
- 【Python使用】使用pip安装卸载Python包(含离线安装Python包)未完成???
pip 是 Python 包管理工具,该工具提供了对Python包的查找.下载.安装.卸载的功能.Python 2.7.9 + 或 Python 3.4+ 以上版本都自带 pip 工具. pip使用( ...