这篇文章主要给大家介绍了关于angular4学习教程之html属性绑定的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值
前言
本文主要给大家介绍了关于angular4 html属性绑定的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。
简介
基本html属性
<td [attr.colspan]="tablecolspan"></td>
css 类绑定
<!-- 第一种情况 class 类全部替换 --><p [class]="pclass">css 类绑定，[class] 全部替换的例子</p><!-- 第二种情况 替换 class 类的部分属性 --> <p [class.a]="isspcial">css 类绑定，[class.sepcial] 部分替换的例子</p> <!-- 第三种情况 根据表达式显示部分 class 属性--><p [ngclass]="{a:isa, b:isb}">css 类绑定，[ngclass] 替换多个的例子</p>
style 属性绑定
<!-- 替换部分的 style --> <button [style.color]="isspecial ? 'red' : 'green'" ]>red</button> <!-- 替换所有的样式 --> <button [ngstyle]="{'font-style':this.cansave? 'italic' : 'normal'}" ]>red</button>
html属性绑定
<td [attr.colspan]=”tablecolspan”>something</td>
tablecolspan 是一个表达式，当界面在渲染的时候会将 tablecolspan的值绑定到 attr后面的 colspan 上面去
修改 bind.component.html
<!-- 增加代码 --><p> <p>[attr.colspan] 例子：</p> <table border="1px"> <tr> <td [attr.colspan]="colspansize">跨列的例子</td> </tr> <tr> <td>单元格1</td> <td>单元格1</td> </tr> </table>
图示：
css 类绑定
第一种情况
[calss]
someexpression 的值会完全替换掉 class的值。
修改 bind.component.css
.a{background-color: #a7a9ae;}.b{color: #488aff;}.c{font-size: 1rem;}
修改bind.component.html
<!-- 增加代码 --><p> <p>css 类绑定例子1：[class]</p> <p [class]="pclass">css 类绑定，[class] 全部替换的例子</p></p>
修改 bind.component.ts
pclass: string;constructor() { //在3秒钟之后将样式设置为 " a b c " setinterval(()=>{ this.pclass = "a b c"; }, 3000)}
图示：
第二种情况
[calss.special]
isspecial 是一个 boolean，当 isspecial 为 true 的时候会出现 special 的值，为 false的时候不会出现。
修改bind.component.html
<!-- 增加代码 --><p [class.a]="isspcial">css 类绑定，[class.sepcial] 部分替换的例子</p>
修改 bind.component.ts
pclass: string;isspcial: boolean = false;constructor() { setinterval(()=>{ this.pclass = "a b c"; //在 3秒钟之后显示样式 this.isspcial = true; }, 3000)}
图示：
第三种情况
[ngclass]="{aaa:isa, bbb: isb}"
aaa 是指标签上面class 的属性值，isa 就boolean， 只有当 isa 为 true 的时候才会显示 aaa 属性。 同理，bbb 也是一样。
修改bind.component.html
<!-- 增加代码 --><p [ngclass]="{a:isa, b:isb}">css 类绑定，[ngclass] 替换多个的例子</p>
修改 bind.component.ts
pclass: string;isspcial: boolean = false;isa: boolean = false;isb: boolean = false;constructor() { setinterval(()=>{ this.pclass = "a b c"; this.isspcial = true; this.isa = true this.isb = true }, 3000)}
图示：
style 属性绑定
第一种情况
[style.color] = "isspecial ? 'red' : 'green' "
控制 style样式的 color, 如果 isspecial 的值为true，那么color的属性为 red。
第二种情况
[ngstyle]= "{'font-style' : this.cansave ? 'italic' : 'normal' }"
控制样式 font-style 如果 this.cansave 的值为 trur 那么样式就是 italic， 否则就是 normal
写在最后
     1.对于style的属性绑定和 class 的属性绑定是一样一样的。
     2.对于文章中所用的代码是结合了 angular2学习笔记之数据绑定上面的例子做的， 链接地址：//www.jb51.net/article/132122.htm
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在javascript中如何实现最长公共子序列
在node.js中如何获取文件上传进度？
为什么node.js会成为web应用开发？
javascript该如何实现获取日期段内每天不同的价格
以上就是在angular4中如何实现html属性绑定的详细内容。