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查看对象功能代码
Apr 25 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 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重定向的三种方法分享
2012/02/22 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
python3实现跳一跳点击跳跃
2018/01/08 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
用python写测试数据文件过程解析
2019/09/25 Python
python tkinter canvas使用实例
2019/11/04 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
申报职称专业技术个人的自我评价
2013/12/12 职场文书
自我评价格式
2014/01/06 职场文书
标准毕业生自荐信
2014/06/24 职场文书
体育教师求职信
2014/06/30 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server