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 相关文章推荐
jQuery 使用个人心得
Feb 26 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
Vue项目服务器部署之子目录部署方法
May 12 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
Vuex模块化应用实践示例
Feb 03 Javascript
JavaScript中变量提升和函数提升的详解
Aug 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
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
在Python的循环体中使用else语句的方法
2015/03/30 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
详解python深浅拷贝区别
2019/06/24 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
Python中pass语句的作用是什么
2016/06/01 面试题
会计专业自荐信范文
2013/12/02 职场文书
关于赌博的检讨书
2014/01/24 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
安阳殷墟导游词
2015/02/10 职场文书
生产现场禁烟通知
2015/04/23 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
速龙x4-860k处理器相当于i几
2022/04/20 数码科技
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS