Angular核心概念：数据绑定
Angular核心概念：数据绑定
Angular核心概念：数据绑定
📒博客首页：蔚说的博客 |
|---|
🎉欢迎关注🔎点赞👍收藏⭐️留言📝 |
🙏作者水平很有限，如果发现错误，求告知，多谢！ |
🌺有问题可私信交流！！！ |
（达内教育学习笔记）仅供学习交流 |
Angular数据绑定 Angular核心概念：数据绑定（1）HTML绑定：{{NG表达式}}（2）属性绑定（3）指令绑定（4）事件绑定()（5）双向数据绑定指令:[（ngModel）]---重点 |
（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)
}效果图：
腾讯云开发者
