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 动态生成方法的例子
Jul 22 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
AngularJS表单基本操作
Jan 09 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
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
实现树状结构的两种方法
2006/10/09 PHP
用PHP写的MySQL数据库用户认证系统代码
2007/03/22 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
php遍历目录方法小结
2015/03/10 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
php创建无限级树型菜单
2015/11/05 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
Python获取文件所在目录和文件名的方法
2017/01/12 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
教学质量评估实施方案
2014/03/17 职场文书
党章培训心得体会
2014/09/04 职场文书
维稳工作承诺书
2015/01/20 职场文书
复试通知单模板
2015/04/24 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
python基础学习之递归函数知识总结
2021/05/26 Python
Node.js实现断点续传
2021/06/23 Javascript