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动态控制服务器控件实例
Sep 05 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 Javascript
微信小程序使用前置摄像头拍照
Oct 22 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学习之流程控制实现代码
2011/06/09 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
ini_set的用法介绍
2014/01/07 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
javascript 解析url的search方法
2010/02/09 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
深入解答关于Python的11道基本面试题
2017/04/01 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python实现126邮箱发送邮件
2020/05/20 Python
求职简历中的自我评价分享
2013/12/08 职场文书
工伤赔偿协议书
2014/04/15 职场文书
协议书与合同的区别
2014/04/18 职场文书
2014年采购工作总结
2014/11/20 职场文书
高三英语教学计划
2015/01/23 职场文书
商务代表岗位职责
2015/02/15 职场文书
反邪教观后感
2015/06/11 职场文书
八月迷情观后感
2015/06/11 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
Python如何加载模型并查看网络
2022/07/15 Python