Angular2中监听数据更新的方法


Posted in Javascript onAugust 31, 2018

angular2 模型数据更新了,需要监听数据改变,

一、实现接口Docheck,检测页面上所有元素数据更新

import { Component, DoCheck } from "@angular/core";
export class LangListUserComponent implements DoCheck {
constructor(private differs: KeyValueDiffers) {
}
ngOnInit() {
 this.objDiffer = {};
 this.list.forEach((elt) => {
  this.objDiffer[elt] = this.differs.find(elt).create(null);
 });
}
ngDoCheck() {
 this.list.forEach(elt => {
  var objDiffer = this.objDiffer[elt];
  var objChanges = objDiffer.diff(elt);
  if (objChanges) {
   objChanges.forEachChangedItem((elt) => {
    if (elt.key === 'prop1') {
     this.doSomethingIfProp1Change();
    }
   });
  }
 });
}

二、针对页面上某个元素的数据更新做处理

1、定义模板驱动表单名

<input type="text" pInputText size="50" [formControl]="term" placeholder="输入搜索条件">

2、ts 文件中新建一个表单元素对象。

colo = new FormControl();

3、ngonInit中订阅数据更新

this.colo.valueChanges.distinctUntilChanged().subscribe((ast) => {
//do something
})

以上这篇Angular2中监听数据更新的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中expression的用法整理
May 13 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
vue.js学习之UI组件开发教程
Jul 03 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
vue中引用阿里字体图标的方法
Feb 10 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 #Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 #Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 #Javascript
Vue.directive使用注意(小结)
Aug 31 #Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 #Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 #Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 #Javascript
You might like
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
Prototype Class对象学习
2009/07/19 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
js操作二进制数据方法
2018/03/03 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
angularJS开发注意事项
2018/05/26 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
分享vim python缩进等一些配置
2018/07/02 Python
Python socket聊天脚本代码实例
2020/01/02 Python
Python对wav文件的重采样实例
2020/02/25 Python
python 进程池pool使用详解
2020/10/15 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
护理专业优质毕业生自荐书
2014/01/31 职场文书
高二学生评语大全
2014/04/25 职场文书
商场促销活动总结
2014/07/10 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
建筑横幅标语
2014/10/09 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
一文搞懂MySQL索引页结构
2022/02/28 MySQL