1. 程式人生 > >Angular2中監聽資料更新

Angular2中監聽資料更新

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

})