Angular绑定数据

1. 绑定数据 {

1.在组件ts文件中定义属性:public 属性名 =  ‘数据’

2.在组件中html中定义:{{属性名}}

}

2. 在html获得ts中的值(也可以绑定图片src)

{

静态属性:title = ‘ming’

动态属性:[title] = ‘ts中属性名字’

}

3. Html获得ts中标签

Html中:[innerHTML] = ‘content’

ts中:public content = ‘<h2>你好<h2>’;

4. 绑定样式和类名

[ngClass]和[ngStyle]

5. 绑定事件

{

Html中:<button  (click)=“run()”>按钮</button>

ts中:run(){...}

例:键盘事件

Html中:<input type=”text”  (keydown)=”keyDown($event)”>

ts中:keyDown(e){e.keyCode //获取键盘code   e.target.value}

}

6. 双向绑定(ts改变html立即改变,反向同理)

首先在app.module.ts中声明{

Import{ FormsModule } from ‘@angular/froms’;

FormsModulef放在imports中

}

其次在html中使用:[(ngmodel)] = “ts属性名”

注:可以双向绑定select的值

7. 当input值发生改变绑定:获得元素值传入(用于输入框)

例:(change) = ‘aaa($event.target.value)’

作者:dlm17
本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
原文地址:https://www.cnblogs.com/dlm17/p/12345341.html