Angular核心概念:数据绑定
📒博客首页:蔚说的博客 |
---|
🎉欢迎关注🔎点赞👍收藏⭐️留言📝 |
🙏作者水平很有限,如果发现错误,求告知,多谢! |
🌺有问题可私信交流!!! |
(达内教育学习笔记)仅供学习交流 |
(1)HTML绑定:{{NG表达式}}
效果图:
在该组件的ts文件添加
export class MyC02Component{
uname = '叮当'
age = 20
}
在该组件.html文件添加
<div>用户名:{{uname}}</div>
<div>年龄:{{age}}</div>
测试:在NG表达式可以执行哪些代码?(Y表示可以,N表示不可以)
算术运算:Y。比较运算:Y。逻辑运算:Y。三目运算:Y。
调用函数:Y。创建对象:N。JSON序列化:N。
NG表达式禁止出现new关键字。NG表达式中JSON是undefined。
结果展示:
ts文件代码:
export class MyC02Component{
uname = 'ding dang'
age = 20
}
html文件代码:
<div>用户名:{{uname}}</div>
<div>年龄:{{age}}</div>
<div>后年年龄:{{age+2}}</div>
<div>成年了吗:{{age>=18}}</div>
<div>成年了吗:{{age>=18 ? '成年' : '未成年'}}</div>
<div>在法定工作年龄吗:{{age>=18 && age<=60}}</div>
<div>用户名长度:{{uname.length}}</div>
<div>用户名大写形式:{{uname.toUpperCase()}}</div>
<div>用户名中下标为2的字符:{{uname[2]}}</div>
<!--创建对象不可以 <div>当前时间:{{new object()}}</div> -->
<!-- JSON字符串序列化不可以<div>JSON字符串:{{JSON.stringify({})}}</div>
(2)属性绑定
形式1:直接在属性上用{{}}现在有的版本禁用
<p title="{{uname}}">直接在属性上使用</p>
形式2:直接使用[]推荐
注意:属性绑定通常赋值为变量,如果赋值为常量(如字符串常量必须用引号括起来,如<img [src]=“‘…/…/assets/’+imgurl”>)
<p [title]="uname">直接在属性上使用</p>
(3)指令绑定
*1. 循环绑定:ngFor
<any *ngFor=“let 临时变量 of 数据”>
<any *ngFor=“let 临时变量 of 数据;let i= index”>
<any *ngFor=“let 临时变量 of 数据;index as i”>
let i= index和index as i是遍历索引
*2. 选择绑定:ngIf
<any *ngIf=“布尔表达式”>
说明:如果布尔表达式为false,则当前元素从DOM树上删除。
<any *ngIf=“布尔表达式”;else ELSE块的编号>
<ng-template # ELSE块的编号>
…
举例:
html文件
<div *ngIf="isPayingUser">
此区域内容仅为付费用户可见
</div>
<div *ngIf="age>=18; else forChildren">
此处是成年的家长看的内容...
</div>
<ng-template #forChildren>此处是未成年的宝宝看的...</ng-template>
<!-- ngIf,else此处只能用NG模板元素ng-template,该容器可以存放其他标签 -->
ts文件:
isPayingUser = true;//该用户是否为付费用户
//isPayingUser = false;
age = 32;
效果图演示:
特殊的选择绑定
- Angular中的指令分三类:
- 1.组件指令:NG中Component继承自Directive
- 2.结构型指令:会影响DOM树结构,必须使用开头,如ngFor,*ngIf
- 3.属性型指令:不会影响DOM树结构,只是影响元素外观或行为,必须用[]括起来,如 :[ngClass],[ngStyle]
<container-element [ngSwitch]="switch_expression">
<!-- the same view can be shown in more than one case -->
<some-element *ngSwitchCase="match_expression_1">...</some-element>
<some-element *ngSwitchCase="match_expression_2">...</some-element>
<some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
<!--default case when there are no matches -->
<some-element *ngSwitchDefault>...</some-element>
</container-element>
3.样式绑定:[ngStyle]
<ANY [ngStyle] = “obj”>
说明:ngStyle绑定的值必须是一个对象。对象属性就是CSS样式名。
实例:
html文件:
<button [ngStyle] = "myStyleObj" (click)="loadMore()">加载更多</button>
ts文件
export class Myc05StyleComponent implements OnInit {
//代绑定的样式对象
myStyleObj = {
backgroundColor:'#383',
color:'#fff',
"border-color":'#252'
}
loadMore(){//直接改变对象
this.myStyleObj.backgroundColor ='#833',
this.myStyleObj['border-color']="522"
}
}
注意:但是我们不推荐这样写,样式有专门的地方存放,这样写的脚本和样式高耦合,不符合我们设计的原则。
4.样式绑定:[ngClass]
<ANY [ngStyle] = “obj”>
说明:ngClass绑定的值必须是一个对象!对象属性就是CSS class名,属性值为ture/false,turn的话该class就出现;否则该class不出现
(4)事件绑定()
(click)=“zengjia”;
注意:事件名用()括起来,处理函数名后必须有()
(5)双向数据绑定指令:[(ngModel)]—重点
方向1:Model=》View,模型变则视图变,用[]绑定
方向2:View=》Model,视图(表单元素)变则模型变,用()绑定
<input/select/textarea [(ngModle)]=" ">
<!-- 用ngModel现在不能识别,需要导入依赖 -->
<input placeholder="请输入用户名" [(ngModel)]="uname" >
注意:直接使用ngModel会直接报错,原因是没有导入模块
ngModel指令在FormsModule模块中,使用之前必须添加
在app.module.ts主模块中导入模块
import {FormsModule} from'@angular/forms';
import:[FormsModule]
监听事件是否绑定成功,使用ngModelChange
<input placeholder="请输入用户名" [(ngModel)]="uname" (ngModelChange)="doUnameChange()">
<!--Angular专用事件:“模型数据改变”ngModelChange-->>
<P>当前的用户绑定{{uname}}</P>
ts文件
改变值打印在控制台上
uname="dingding";
doUnameChange(){
console.log(this.uname)
}
效果图: