Angular核心概念：数据绑定

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：直接使用[]推荐
注意：属性绑定通常赋值为变量，如果赋值为常量（如字符串常量必须用引号括起来，如）

<p [title]="uname">直接在属性上使用</p>

（3）指令绑定

*1. 循环绑定：ngFor



let i= index和index as i是遍历索引
*2. 选择绑定：ngIf

说明：如果布尔表达式为false，则当前元素从DOM树上删除。


…

举例：
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]

说明：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]

说明：ngClass绑定的值必须是一个对象！对象属性就是CSS class名，属性值为ture/false,turn的话该class就出现；否则该class不出现

（4）事件绑定()

(click)=“zengjia”;
注意：事件名用（）括起来，处理函数名后必须有（）

（5）双向数据绑定指令:[（ngModel）]—重点

方向1：Model=》View，模型变则视图变，用[]绑定
方向2：View=》Model，视图（表单元素）变则模型变，用（）绑定

<!-- 用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)
  }

效果图：