Angular属性绑定的功能探索
Angular属性绑定的功能探索
- Angular的属性绑定机制不起作用
- 探索
Angular的属性绑定机制不起作用
今天用Kendo UI for Angular的TreeList组件时发现了一个问题：
将一个数组类型的对象data作为TreeList的数据源，当向data中追加新的元素时，画面上TreeList的数据并不会立即刷新；而将data赋值null或者其他新赋值时，TreeList的数据就会立刻刷新。为什么已经将data绑定到TreeList上了，即使data的值发生了变化，画面内容没有立即改变呢？似乎Angular的属性绑定机制没有起作用一样。。
探索
Kendo UI for Angular的TreeList组件有其自己的解决办法，使用FlatBindingDirective.rebind()可以完成刷新的功能。Angular的绑定机制不就是为了让后台改变的内容自动反应到画面上么？为何已经绑定好的东西，实现真正的"绑定"功能却需要其他的方法来辅助完成呢？
关于Angular如何实现数据绑定机制的原理在网上可以搜索到很多资源，这里就不再详细说明了。
简单来说，Angular提供了一个监视器去监视被绑定的变量是否发生变化，如果监视器认为被绑定的变量发生了变化，就会将其反应到绑定该变量的组件上。
那么什么样的情况下才是 监视器认为被绑定的变量发生了变化 了呢？
页面代码
<div><input [value]="strTest" /><button (click)="testFunction1()">testFunction1</button>
</div>
<div><input [value]="strTest" /><button (click)="testFunction2()">testFunction2</button>
</div>
<div><input [value]="strTest" /><button (click)="testFunction3()">testFunction3</button>
</div>
ts代码
export class AppComponent {public strTest: string[] = ['test1', 'test2', 'test3'];public testFunction1(): void {console.log(this.strTest);this.strTest.push('test4');console.log(this.strTest);}public testFunction2(): void {console.log(this.strTest);this.strTest = ['test4'];console.log(this.strTest);}public testFunction3(): void {console.log(this.strTest);this.strTest[0] = 'testtest1';console.log(this.strTest);}
}
画面:
点击第一个按钮:
点击第二个按钮:
点击第三个按钮:
从以上示例可以看出，所谓Angular监视被绑定的对象变量，其实是监视其堆栈中的值。
对于简单数据类型，堆栈中存放的就是其值，因此一旦变量的值发生了改变，其堆栈中存放的内容就发生了改变，因此Angular的监视器便会捕捉到这一变化从而改变组件上的内容。
对于引用数据类型，堆栈中存放的是指针(引用对象的地址)。
当引用对象的值发生改变时，堆栈中的地址并没有改变，仅仅只是其地址所指向的对象发生了改变。这种情况下，Angular监视器并不认为该对象已经发生了变化，所以并不会刷新组件的内容(上面例子中的按钮一和按钮三)；
当引用对象发生改变，如：被赋予了新对象…其堆栈中的地址就发生了改变。这种情况下，Angular监视器就会认为对象发生了变化，进而刷新组件的内容(上面例子中的按钮二)。
Angular属性绑定的功能探索相关推荐
- angular属性绑定绑定函数，插值表达式插函数，ngIf绑定函数
以前认为angular属性绑定的时候只能绑定属性,官网上也没说能绑定函数,看同事代码的时候被惊呆了,可以绑定函数,而不仅仅是属性,可以绑定函数,而不仅仅是属性,可以绑定函数,而不仅仅是属性,整理一下相 ...
- Angular属性绑定，class绑定，事件绑定，属性样式绑定
多谢大佬指正,原创转载连接. 属性绑定 插值表达式:src="{{user.pic}}" 使用: [ ] :[property]="变量" 使用:bind-:b ...
- Vue Angular 双向绑定检测不到对象属性的添加和删除
由于ES5的限制 Vue && Angular 双向绑定检测不到对象属性的添加和删除 还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...
- Angular开发(三)-关于属性绑定与事件绑定
一.新建一个项目工程并创建一个组件bind,如果还有不知道怎么创建angular项目的请先查看Angular2从环境搭建到开发建议直接用angular-cli创建 二.数据绑定 插值的方式[比较常见] ...
- angular条件渲染、列表渲染、属性绑定、样式绑定、事件绑定
文章目录 属性绑定 样式绑定 绑定单一样式 绑定多个样式 用 NgStyle 设置内联样式 类绑定 绑定单个类样式 绑定到多个 CSS 类 用 NgClass 添加和删除类 条件渲染 列表渲染 *ng ...
- angularjs绑定属性_AngularJS隔离范围属性绑定教程
angularjs绑定属性 We have discussed about the isolate scope and its basic usage in the previous tutorial ...
- 获取Angular中的AngularJS功能
介绍 ( Introduction ) If you have solid experience with AngularJS 1.x, you're well aware of the framew ...
- Angular 双向绑定
Angular10教程--2.3 双向绑定 双向绑定大致可以分成两种类型: 一.普通组件的双向绑定 二.表单中的双向绑定[(ngModel)] 单独使用表单元素 在标签中使用 总结: 前面我们了解了属 ...
- java mvc 绑定_关于Java：Spring MVC：将请求属性绑定到控制器方法参数
在Spring MVC中,很容易将请求参数绑定到处理请求的方法参数. 我只是使用@RequestParameter("name"). 但是我可以对request属性做同样的事情吗? ...
最新文章
- Python使用正则表达式分割字符串
- Oracle安装笔记
- php 抓取页面图片,php 抓取网页内容与图片的方法
- 一文弄懂String的所有小秘密
- 数据结构Java版之排序算法（二）
- Windows下提升进程权限（转）
- C#中lock关键字的用法
- CSS基础选择器之标签选择器(CSS、HTML)
- python最适合做什么-学习Python适合就业哪些岗位？老男孩Python学习
- Duplicate methods named spliterator with the parameters () and () are inherited from the types Colle
- 【游戏开发】UE4联机渲染swarm agent配置
- html语言判断水仙花数,水仙花数判断讲解
- SOFA Weekly | QA 整理
- tomcat介绍和TCP传输文件的实现
- freetype的简单使用
- HTTP/HTTPS协议
- 职业高一计算机试题,信息技术教师考试题库
- C#基于NAudio的声音识别（二）——MFCC+SVM/BP
- 心灵震撼《一个8岁女孩的遗书》
- 格式化————format