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 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
关于Javascript模块化和命名空间管理的问题说明
Dec 06 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 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中var_dump方法的使用详解
2013/06/24 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
python使用Apriori算法进行关联性解析
2017/12/21 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
python内存动态分配过程详解
2019/07/15 Python
python将图片转base64,实现前端显示
2020/01/09 Python
python suds访问webservice服务实现
2020/06/26 Python
python实现无边框进度条的实例代码
2020/12/30 Python
python中altair可视化库实例用法
2021/01/26 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
质检部职责
2013/12/28 职场文书
班组长岗位职责
2014/03/03 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
学校宣传标语
2014/06/18 职场文书
银行招聘自荐信
2015/03/06 职场文书
六一儿童节致辞
2015/07/31 职场文书
环保建议书范文
2015/09/14 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
golang 如何用反射reflect操作结构体
2021/04/28 Golang