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 Mobile页面返回不需要重新get
Apr 26 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
AngularJS实现路由实例
Feb 12 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
JavaScript实现省市联动效果
Nov 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设计模式之命令模式的深入解析
2013/06/13 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
Python多图片合并PDF的方法
2019/01/03 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
介绍一下Mysql的存储引擎
2015/02/12 面试题
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
高级方案规划工程师岗位职责
2013/11/29 职场文书
保密普查工作实施方案
2014/02/25 职场文书
计划生育标语
2014/06/23 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
Python中的socket网络模块介绍
2022/07/23 Python