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. spring boot 页面根路径获取和jsp获取的不同之处(粘贴即用)

    不同之处已做高亮. jsp 写法: <script type="text/javascript" src="${pageContext.request.contex ...

  2. JDK8新特性:default方法的应用实践

    背景: 最近维护一个老旧工程,遇到集团层面的数据安全改造,需要在DAO层做加解密改造.而这个老旧工程的DAO层是用的JdbcTemplate实现的,尽管template方式实现起来可自由发挥的空间很大 ...

  3. Python 100例(001)

    #!/usr/bin/env python # coding:utf-8 '''有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少?''' n = 1 num = [4, ...

  4. 51nod“省选”模测第二场 B 异或约数和(数论分块)

    题意 题目链接 Sol 这题是来搞笑的吧.. 考虑一个数的贡献是\(O(\frac{N}{i})\) 直接数论分块. #include<bits/stdc++.h> #define Pai ...

  5. MyEclipse自动补全

    打开MyEclipse 6.5,然后"window"→"Preferences". 选择"java",展开,"Editor&quo ...

  6. 2019-02-20 在PyPI测试平台发布Python包

    参考Packaging Python Projects, 源码在nobodxbodon/test-package-for-pypi 包名/__init__.py: 测试变量 = "值&quo ...

  7. Vs2017 无法调试APP

      其实一切都是扯,看看有没有主活动吧 症状:能部署安装,没有快捷方式,不启动调试.XARAMIN不能在XML中配置主活动,会自动根据[Activity(Label = "AA", ...

  8. FocusListener焦点监听器

    [FocusListener焦点监听器] public class Demo extends JFrame { public Demo(){ setDefaultCloseOperation(Wind ...

  9. Android远程桌面助手扩展之微信跳一跳辅助

    微信跳一跳的外挂辅助已是五花八门,万能的TB上也有了各种明码标价的代练.微信小程序游戏的火爆甚至带火了手游外挂产业.另一方面,跳一跳游戏也在不断更新,防止使用外挂刷高分.Android远程桌面助手支持 ...

  10. js 数组去重小技巧

    js 数组去重小技巧 Intro 今天遇到一个问题,需要对数据进行去重,想看一下有没有什么比较方便的方法,果然有些收获. Question 问题描述: 我有一个这样的数据: [ { "Pro ...