Angular核心概念:数据绑定

Angular核心概念:数据绑定

博客首页:蔚说的博客
欢迎关注点赞收藏⭐️留言
作者水平很有限,如果发现错误,求告知,多谢!
有问题可私信交流!!!
(达内教育学习笔记)仅供学习交流

Angular数据绑定

  • Angular核心概念:数据绑定
    • (1)HTML绑定:{{NG表达式}}
    • (2)属性绑定
    • (3)指令绑定
    • (4)事件绑定()
    • (5)双向数据绑定指令:[(ngModel)]---重点

(1)HTML绑定:{{NG表达式}}

效果图:
Angular核心概念:数据绑定_第1张图片
在该组件的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。
结果展示:
Angular核心概念:数据绑定_第2张图片
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)
  }

效果图:
Angular核心概念:数据绑定_第3张图片

你可能感兴趣的:(Angular,angular.js,javascript,typescript)