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 数据绑定的更多相关文章

  1. Angular4.0从入门到实战打造在线竞拍网站学习笔记之四--数据绑定&管道

    Angular4.0基础知识之组件 Angular4.0基础知识之路由 Angular4.0依赖注入 数据绑定 数据绑定允许你将组件控制器的属性和方法与组件的模板连接起来,大大降低了开发时的编码量. ...

  2. Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定

    Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...

  3. angular4.0中form表单双向数据绑定正确姿势

    issue:用[(ngModel)]="property"指令双向数据绑定,报错. reason1:使用ngModel绑定数据需要注入FormsModule模块,在app.modu ...

  4. Angular4学习笔记(五)- 数据绑定、响应式编程和管道

    概念 Angular中的数据绑定指的是同一组件中控制器文件(.ts)与视图文件(.html)之间的数据传递. 分类 流向 单向绑定 它的意思是要么是ts文件为html文件赋值,要么相反. ts-> ...

  5. angular4自定义组件非input元素实现ngModel双向数据绑定

    在angular里我们一般都是给input元素添加[(ngModel)]="value"实现数据双向绑定,如果想实现自定义的组件上实现ngModel双向数据绑定应该怎么办呐... ...

  6. angular4+中的数据绑定

    1,基本的属性绑定,下面的两种形式是一样的 2.dom属性和html属性 3.两者关系的进一步总结 4.dom属性绑定 5.html属性绑定

  7. AngularJs学习笔记2-控制器、数据绑定、作用域

    上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习,可以学习2.0开始学习,我也知道1.x无论是从性能还是架构上都没有2.x好,但是我想因为现在也有一些朋友还在用1.x版本,因为1. ...

  8. Angular4.0学习笔记 从入门到实战打造在线竞拍网站学习笔记之二--路由

    Angular4.0基础知识见上一篇博客 路由 简介 接下来学习路由的相关知识 本来是不准备写下去的,因为当时看视频学的时候感觉自己掌握的不错 ( 这是一个灰常不好的想法 ) ,过了一段时间才发现An ...

  9. Angular4.0从入门到实战打造在线竞拍网站学习笔记之三--依赖注入

    Angular4.0基础知识之组件 Angular4.0基础知识之路由 依赖注入(Dependency Injection) 正常情况下,我们写的代码应该是这样子的: let product = ne ...

随机推荐

  1. 亚马逊 amazon connect(呼叫中心)

    背景 公司为提高客服部门沟通效率对接电话呼叫中心,调研后选择了亚马逊的Amazon Connect服务,因为是国外业务没有选择用阿里云,怕有坑. Amazon Connect后台 需要在后台创建“联系 ...

  2. (办公)TOKEN

    token就是HTTP认证,输入正确的token,在放在Authorization header中发送给服务器,认证成功.,就可以正确的拿到接口数据. 举个例子: 第一步:  客户端发送http re ...

  3. npm缺少css-loader,/style-compiler,stylus-loader问题,npm没有权限无法全局更新问题【已解决】

    ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":tru ...

  4. Linux命令大全 欢迎补充 评论添加~

    系统信息  arch 显示机器的处理器架构(1)  uname -m 显示机器的处理器架构(2)  uname -r 显示正在使用的内核版本  dmidecode -q 显示硬件系统部件 - (SMB ...

  5. 实现MongoDB读写分离的“读偏好”介绍

    在某些情况下,将读请求发送给副本集的备份节点是合理的,例如,单个服务器无法处理应用的读压力,就可以把查询请求路由到可复制集中的多台服务器上.现在绝大部分MongoDB驱动支持读偏好设置(read pr ...

  6. PGSQL-通过SQL语句来计算两个日期相差的天数

    这是本人第一次写的~我在某次需求中遇到一个问题,如何在SQL语句中计算出两个日期的天数,然后用那个结果来进行数据的筛选呢?通过网上查阅了资料发现 date_part('day', cast(time1 ...

  7. 伙伴系统之伙伴系统概述--Linux内存管理(十五)

    在内核初始化完成之后, 内存管理的责任就由伙伴系统来承担. 伙伴系统基于一种相对简单然而令人吃惊的强大算法. Linux内核使用二进制伙伴算法来管理和分配物理内存页面, 该算法由Knowlton设计, ...

  8. C# groupby 应用小技巧

    这两天感冒了,导致大脑无法有效运转,一个朋友问我,groupby 怎么给list 分组,然后再将其中一个字段组合起来,恩,觉得很简单,结果才发现,自己的脑子真的是不够用了: 恩,其实是想写其他的,但是 ...

  9. 算法"新"名词

    这个“新”是对于自己而言. 最近几天接触到很多新的名词,如: 回溯法(backtracking):以前知道,但很少用 动态规划(dynamic programming):序列型.矩阵型.区间型.背包等 ...

  10. 【Python使用】使用pip安装卸载Python包(含离线安装Python包)未完成???

    pip 是 Python 包管理工具,该工具提供了对Python包的查找.下载.安装.卸载的功能.Python 2.7.9 + 或 Python 3.4+ 以上版本都自带 pip 工具. pip使用( ...