Angular2中监听数据更新

原文出处：https://blog.youkuaiyun.com/cut001/article/details/70885762 （原文更易阅读）

angular2 模型数据更新了，需要监听数据改变，

一、实现接口Docheck，检测页面上所有元素数据更

 

1. import { Component, DoCheck } from "@angular/core";

2. export class LangListUserComponent implements DoCheck {

 

1. constructor(private differs: KeyValueDiffers) {

2. }

1. ngOnInit() {

2. this.objDiffer = {};

3. this.list.forEach((elt) => {

4. this.objDiffer[elt] = this.differs.find(elt).create(null);

5. });

6. }

 

1. ngDoCheck() {

2. this.list.forEach(elt => {

3. var objDiffer = this.objDiffer[elt];

4. var objChanges = objDiffer.diff(elt);

5. if (objChanges) {

6. objChanges.forEachChangedItem((elt) => {

7. if (elt.key === 'prop1') {

8. this.doSomethingIfProp1Change();

9. }

10. });

11. }

12. });

13. }

二、针对页面上某个元素的数据更新做处理

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

})