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 相关文章推荐
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
js闭包实现按秒计数
Apr 23 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
php文件下载处理方法分析
2015/04/22 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
使用async await 封装 axios的方法
2018/07/09 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
python 并发下载器实现方法示例
2019/11/22 Python
如何使用repr调试python程序
2020/02/28 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
校本教研工作制度
2014/01/22 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
小学思想品德教学反思
2016/02/24 职场文书
Python必备技巧之函数的使用详解
2022/04/04 Python