Angular2中監(jiān)聽(tīng)數(shù)據(jù)更新的方法
更新時(shí)間：2018年08月31日 10:36:50 作者：坐在那邊看天空
今天小編就為大家分享一篇Angular2中監(jiān)聽(tīng)數(shù)據(jù)更新的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
angular2 模型數(shù)據(jù)更新了，需要監(jiān)聽(tīng)數(shù)據(jù)改變，
一、實(shí)現(xiàn)接口Docheck，檢測(cè)頁(yè)面上所有元素?cái)?shù)據(jù)更新
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();
}
});
}
});
}
二、針對(duì)頁(yè)面上某個(gè)元素的數(shù)據(jù)更新做處理
1、定義模板驅(qū)動(dòng)表單名
<input type="text" pInputText size="50" [formControl]="term" placeholder="輸入搜索條件">
2、ts 文件中新建一個(gè)表單元素對(duì)象。
colo = new FormControl();
3、ngonInit中訂閱數(shù)據(jù)更新
this.colo.valueChanges.distinctUntilChanged().subscribe((ast) => {
//do something
})
以上這篇Angular2中監(jiān)聽(tīng)數(shù)據(jù)更新的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Angular2 路由問(wèn)題修復(fù)詳解的相關(guān)資料,并建了一個(gè)測(cè)試工程，把詳細(xì)的過(guò)程分享給大家，需要的朋友可以參考下2017-03-03
AngularJS框架的ng-app指令與自動(dòng)加載實(shí)現(xiàn)方法分析
這篇文章主要介紹了AngularJS框架的ng-app指令與自動(dòng)加載實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了ng-app指令的功能及自動(dòng)加載機(jī)制的實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-01-01
詳解angularjs popup-table 彈出框表格指令
本篇文章主要介紹了angularjs popup-table 彈出框表格指令，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
詳解angularjs4部署文件過(guò)大解決過(guò)程
這篇文章主要介紹了詳解angularjs4部署文件過(guò)大解決過(guò)程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了基于AngularJS前端云組件最佳實(shí)踐,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
Angualrjs和bootstrap相結(jié)合實(shí)現(xiàn)數(shù)據(jù)表格table
這篇文章主要介紹了Angualrjs和bootstrap相結(jié)合實(shí)現(xiàn)數(shù)據(jù)表格table,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
本篇文章主要介紹了angular中的cookie讀寫方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
AngularJS通過(guò)ng-Img-Crop實(shí)現(xiàn)頭像截取的示例
本篇文章主要介紹了AngularJS通過(guò)ng-Img-Crop實(shí)現(xiàn)頭像截取的示例，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
angularJS+requireJS實(shí)現(xiàn)controller及directive的按需加載示例
本篇文章主要介紹了angularJS+requireJS實(shí)現(xiàn)controller及directive的按需加載示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
這篇文章主要介紹了淺析AngularJS中的生命周期和延遲處理,是AngularJS中較為核心的深層次內(nèi)容,需要的朋友可以參考下2015-06-06