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. Redis面试点

      redis的数据结构有那些 字符串 String 字典:Hash 列表:List 集合:set 有序集合:sortedSet 如果大量的key设置在同一时间过期,一般需要注意什么 大量的key过期 ...

  2. response.writeHead

    response.writeHead(statusCode[, statusMessage][, headers]) 查看英文版 版本历史 statusCode <number> stat ...

  3. 流程控制之 if 判断

    语法一:if 条件: 代码1 代码2 代码3 gender='female'age=18is_beautiful=True if gender == 'female' and age > 16 ...

  4. ServiceHub.DataWarehouseHost.exe内存泄漏问题的处理

    Visual Studio 2017的15.2版本在debug应用程序时,ServiceHub.DataWarehouseHost.exe会出现严重的内存泄漏的问题,一个小时左右,内存耗了将近8GB. ...

  5. Android开发如何轻松实现基于Tesseract的Android OCR应用程序

    介绍 此应用程序使用Tesseract 3的Tesseract OCR引擎,该引擎通过识别字符模式( https://github.com/tesseract-ocr/tesseract )来工作. ...

  6. Docker 创建 Jira Core(Jira SoftWare) 7.12.3 中文版

    目录 目录 1.介绍 1.1.什么是 JIRA Core? 1.2.什么是 JIRA SoftWare 2.JIRA 的官网在哪里? 3.如何下载安装? 4.对 JIRA 进行配置 4.1.JIRA ...

  7. Word Count作业

    Word Count作业 一.个人Gitee地址:https://gitee.com/Changyu-Guo 二.项目简介 该项目主要是模拟Linux上面的wc命令,基本要求如下: 命令格式: wc. ...

  8. DAS、SAN和NAS三种存储方式

    DAS存储 DAS存储在我们生活中是非常常见的,尤其是在中小企业应用中,DAS是最主要的应用模式,存储系统被直连到应用的服务器中,在中小企业中,许多的数据应用是必须安装在直连的DAS存储器上. DAS ...

  9. 导致spring事务配置不起作用的一种原因

    @Component public class AnalyticsApplication { @Autowired private InitializationActionService initia ...

  10. 文件操作命令(rename)

    Rename 命令: // 描述: 重命名文件或目录. // 语法: rename [<Drive>:][<Path>]<FileName1> <FileNa ...