Angular--数据绑定

淩亂°似流年 2021-09-27 08:24 421阅读 0赞

# 前言 #

Angular学习的时候，在数据与数据之间的处理联系是非常重要的，而且处理数据之间的逻辑不是很清楚明白的话，很容易弄混，所以这篇博客总结一下数据与数据之间的关系，简单介绍一下这方面的信息。

# 内容 #

## 数据绑定 ##

数据绑定是允许将组建控制器的属性和方法与组建的模块联系起来，有三种模式，如下：  
**1**.使用查值表达式将一个表达式的值显示在模版上

<h1>{ { product.Title}}</h1>

**2**.使用方括号将HTML标签的一个属性绑定到一个表达式上

<img [src] = "imgUrl">

**3**.使用小括号将组件控制器的一个方法绑定为模版上一个事件的处理器

<button (click)="toProductDetail()">商品详情</button>

在上面的三种绑定里面也可以看出，都是在HTML界面上绑定TS（TypeScript）里面的属性，这种绑定叫做事件绑定（从html绑定到ts）。我们是否可以猜想一下，既然有事件绑定，而且Angular是的绑定是双向绑定的，那么肯定会有从TS绑定到HTML中的，这个绑定成为属性绑定（从ts绑定到html）。既然聊到了事件绑定，那么也简单的介绍一下：

### 事件绑定 ###

首先来看一张图，这种图能很好的介绍事件绑定的一些内容，如下。  
![这里写图片描述][70]  
小括号中的**input**:表示在TS里面有相应的属性定义，然后在HTML页面帮顶起来，比如`input：number;`表示定义了input的属性为数字类型。  
**$event**：表示在TS里面有相应的触发表达式，比如：

doOnClick(event:any){
        console.log(event);
    }

表示点击一下就会显示出event所点击处的值。  
同时我们应当注意一下，查值表达式和属性绑定是统一概念，如下例子：

HTML： <img[src]="imgUrl"><br> <imgsrc="{ { imgUrl}}"><br>  TS： imgUrl:string='http://placehold.it/400x220';

# 总结 #

事件绑定看起来简单，但是用起来就没有那么得心应手，需要好好的去学，并且在使用的时候需要逻辑清晰。

# end #

谢谢您的阅读！

[70]: /images/20210923/c7d3ae527fcf4d3386017cf014b4ddf2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，421人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular中数据文本绑定、绑定Html、绑定属性、双向数据绑定的实现方式

场景 Angular介绍、安装Angular Cli、创建Angular项目入门教程： [https://blog.csdn.net/BADAO\_LIUMANG\_Q

系统管理员/ 2023年10月07日 13:31/ 0 赞/ 37 阅读

相关 Angular2中的数据绑定

实现数据绑定首先要在input的上面添加name属性，否则是绑定不上的。添加完成name属性后再在input上面添加ng-model=”绑定的变量” <inpu

墨蓝/ 2022年07月15日 11:39/ 0 赞/ 198 阅读

相关 Angular4的双向数据绑定

最近在学angular4，因为angularjs中默认是双向数据绑定，但是如果在比较复杂的页面使用的话会引起性能问题，那是因为angularjs会在页面保存一个所有数据绑定的列

深碍√TFBOYSˉ_/ 2022年06月05日 06:54/ 0 赞/ 259 阅读

相关 Angular 绑定语法简介

一、绑定类型数据绑定是一种机制，用来协调用户所见和应用数据。虽然我们能往HTML推送值或者从HTML拉去值，但如果把这些琐事交给数据绑定框架处理，应用汇更容易编写、阅读和维

傷城~/ 2022年06月03日 05:55/ 0 赞/ 258 阅读

相关 angular 绑定enter键

<div class="jumppage" > <input type="text" placeholder="跳转" οnfοcus="this.placeholder=

忘是亡心i/ 2022年06月02日 08:51/ 0 赞/ 210 阅读

相关【Angular4】基础（三）：数据绑定

数据绑定总体而言有三种类型： \{ \{…\}\} 插值表达式绑定属性绑定事件绑定插值表达式绑定插值表达式绑定比较常见 // ap

ゞ浴缸里的玫瑰/ 2022年05月30日 05:07/ 0 赞/ 290 阅读

相关 angular 双向绑定

Can't bind to 'ngModel' since it isn't a known property of 'input'. 原因:库未引用完整解决:

古城微笑少年丶/ 2022年05月20日 06:45/ 0 赞/ 301 阅读

相关 Angular 单向数据绑定{{}}与[]

单向数据绑定首先认识一下数据绑定: Angular中的数据绑定指的是同一组件中的控制器文件(.ts)与模板文件(.html)之间的数据传递。再认识一下单向数据绑定:

r囧r小猫/ 2022年05月15日 00:59/ 0 赞/ 360 阅读

相关 angular6学习(八)：数据绑定

数据绑定： ![70][] 一、插值表达式绑定：\{ \{data\}\} ts文件中： ![70 1][] html文件中 ![70 2][] 显示

野性酷女/ 2022年05月09日 03:40/ 0 赞/ 230 阅读

相关 Angular--数据绑定

前言 Angular学习的时候，在数据与数据之间的处理联系是非常重要的，而且处理数据之间的逻辑不是很清楚明白的话，很容易弄混，所以这篇博客总结一下数据与数据之间的关系，简

淩亂°似流年/ 2021年09月27日 08:24/ 0 赞/ 422 阅读