Angular2中监听数据更新的方法

2024-07-30 21:55:51

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中监听数据更新的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

Angular2数据绑定详解

大致介绍 Angular2中数据绑定的方式默认是以单向方式,数据绑定的方式可以分为: 1.属性绑定和插值表达式组件类-> 模板 2.事件绑定:模板 -> 组件类 3.双向绑定: 模板 <-> 组件类事件绑定事件绑定是把模板中的事件绑定到组件类中的方法上,例如在一个组件中的HTML代码是: <p> <a (click)="doClick($event)">点我</a> </p> (click)表示要进行的操作,
解决angular2 获取到的数据无法实时更新的问题

今天在工作当中碰到了个问题,当我点击地图上面的城市,从后台获取数据更新列表,明明后台的数据已经返回到前端,但是数据就是不能实时更新到页面上,因为在做第一版的时候是没有这个问题的,就感觉可能是自己调用后台接口的时候顺序出了问题,结果一直钻到死胡同里面去了,后来求助老大,终于把问题解决了,现在记录一下,以加深记忆. 问题:点击下面地图上的城市,更新列表 getPageList(){ //this.postMapJson 输入数据 this.netUserAnalyzeService.getCityO
AngularJS实现一次监听多个值发生的变化

一.$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name} . listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参
Angular2监听页面大小变化的解决方法

一.现象全屏页面中的图表,在很多的时候需要 resize 一把,以适应页面的大小变化二.解决 1.引入 : import { Observable } from 'rxjs'; 2.使用(在ngOnInit方法中): ngOnInit() { // 页面监听 Observable.fromEvent(window, 'resize') .debounceTime(100) // 以免频繁处理 .subscribe((event) => { // 这里处理页面变化时的操作 console.lo
Angular2中监听数据更新的方法

angular2 模型数据更新了,需要监听数据改变, 一.实现接口Docheck,检测页面上所有元素数据更新 import { Component, DoCheck } from "@angular/core"; export class LangListUserComponent implements DoCheck { constructor(private differs: KeyValueDiffers) { } ngOnInit() { this.objDiffer = {}
React和Vue中监听变量变化的方法

React 中本地调试React代码的方法 yarn build 场景假设有这样一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state. 16之前在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换 16之后在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听, getDerivedStateFromProps 可以返回 null 或者一个对象,如果
vuejs中监听窗口关闭和窗口刷新事件的方法

1.使用window.onunload之类的API window.onbeforeunload = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = '关闭提示'; } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return '关闭提示'; }; 2.在生命周期钩子中注册监听事件 methods: { beforeun
vue中监听路由参数的变化及方法

在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数,在同一页面切换id的值,并不会触发vue的声明周期函数. 可以添加路由监听: watch: { $route: { handler() { this.id = this.$route.query.id; this.get
小程序中监听页面滚动的几种方法实例

目录目录实现效果下面是Intersection Observer在MDN上的介绍 IntersectionObserver relativeToViewport 接受参数 Object margins observe(string targetSelector, function callback) 参数 Object res 小程序中监听页面的其他方法 page-meta scroll-view 总结在工作中我们经常遇到需要监听页面中元素位置,当元素超出显示区域或即将显示到页面上,我们
Android使用GPS获取用户地理位置并监听位置变化的方法

本文实例讲述了Android使用GPS获取用户地理位置并监听位置变化的方法.分享给大家供大家参考,具体如下: LocationActivity.java /* LocationActivity.java * @author octobershiner * 2011 7 22 * SE.HIT * 一个演示定位用户的位置并且监听位置变化的代码 * */ package uni.location; import android.app.Activity; import android.content
Android 监听网络状态方法详解

Android 监听网络状态方法详解一.加入网络权限获取网络信息需要在AndroidManifest.xml文件中加入相应的权限. <uses-permission Android:name="android.permission.ACCESS_NETWORK_STATE" /> 二.判断手机网络的几个方案 1)判断是否有网络连接 public boolean isMobileConnected(Context context) { if (context != nul
JavaScript实现为事件句柄绑定监听函数的方法分析

本文实例讲述了JavaScript实现为事件句柄绑定监听函数的方法.分享给大家供大家参考,具体如下: 在JavaScript中为Dom元素绑定事件监听函数是一件非常常见的事情,但这里也有许多的Bug.各种浏览器对于事件绑定都提供了很多方法,但可靠的只有3中: 1.传统的绑定方法: elem.onclick = function( event ){ alert(event.type + 'this.innerHTML'); }; a.传统的绑定方法,非常简单稳定,函数体内的this指向的也是指向正
vue中监听返回键问题

问题:在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿解决方案:利用 H5的 pushstate(个人理解为增加页面栈)特性与onpopup事件分析:pushstate 从该方法名我们可以知道是增加某种状态,会为history对象的length增加长度, 点击返回键的时候会触发onpopup事件(可以联想到 pop其实是数组删除的最后一个元素,符合 '栈' 的思想): onpopup触发返回上一页,而 pushstate仅仅是
npm script命令同时进行多个监听服务的方法

最近在搭建一个静态页面偏多的网站, 用vue或React有点大材小用,使用纯html / css / js 又不好用, 于是就用npm手动搭建一个简单的本地开发环境, 本地环境要实现几个基本功能在本地开启http服务 ; 且开启服务后, 会自动打开浏览器浏览器自动刷新 ; 源码变化后, 浏览器会自动刷新显示内容支持sass语法 ; 将sass代码实时转换为css 支持es6语法 ; 使用babel将es6转换为es5 开启http服务, 自动开启浏览器, 实现浏览器自动刷新的实现思路是,在

Angular2中监听数据更新的方法

相关推荐

随机推荐