Angular2 监视对象/数组更改(Angular2 最终>= 2.1.1)

Question

我想观看一个对象/数组，该对象/数组由服务或控制器例程编辑。我认为可观察的可以观看对象/数组。

我的实现对项目的更改没有反应：

  private data : Observable<Array<any>>;
  private dataObserver: Observer<Array<any>>;
  private sub : Subscription;
  private items: <Array<any>>;
  ngOnInit() {
     this.items = itemService.getItems();
     this.data = new Observable<Array<any>>(observer =>{
        this.dataObserver = observer;
     });
     this.data.subscribe(
        x => console.log('onNext: %s', x),
        e => console.log('onError: %s', e),
        () => console.log('onCompleted')
     );
     this.dataObserver.next(this.items);
  }

private start(){
  //change values of the array in an interval
  let loop = Observable.interval(250)
  let i=0;
  self.sub = loop.subscribe(() => {
      if(self.items[0]){
        self.items[0].id= i;
        if(i<100) i++;
        else i=1;
      }
  })
}

observalbes subsciption在项目数组的变化上没有反应。它只会触发其下一个Mehtod。另一方面..对于简单的手表方法来说这太麻烦了。

Angular-2为我们提供了什么，以便我们观看更改，因为$范围。

angular2提供IterableDiffer（数组）和KeyValueDiffer（对象）以获取有关两次检查之间差异的信息。

NgClass是一个很好的例子https://github.com/angular/angular/blob/14EE75924B6AE770115F7F7F260D720EFA8BFB576A/MODULES/modules/@angular/common/common/common/common/src/directive/src/deirectives/ngectass/ngclass.class.class.class.class.clas>

另请参见https://angular.io/docs/ts/latest/api/#!?query=differ

一个例子

// inject a differ implementation 
constructor(differs: KeyValueDiffers) {
  // store the initial value to compare with
  this.differ = differs.find({}).create(null);
}
@Input() data: any;
ngDoCheck() {
  var changes = this.differ.diff(this.data); // check for changes
  if (changes && this.initialized) {
    // do something if changes were found
  }
}

在导入部分：

import { DoCheck, KeyValueDiffers, KeyValueChangeRecord } from '@angular/core';

添加"钥匙值"喷油器：

private _differ: any;    
constructor(private _differs: KeyValueDiffers) {
    this._differ = _differs.find({}).create();
}

最终跟踪更改：

ngDoCheck() {
    const change = this._differ.diff(this.Your_Object_To_Track);
    if (change) {
        change.forEachChangedItem(
            (record: KeyValueChangeRecord<any, any>) => {
                console.log(record.key + ': ' +  record.previousValue + '=>' + record.currentValue) });
        change.forEachRemovedItem(                
                (record: KeyValueChangeRecord<any, any>) => {
                    console.log(record.key + ': ' +  record.previousValue + '=>' + record.currentValue) });
        change.forEachAddedItem((record: KeyValueChangeRecord<any, any>) => {
                console.log(record.key + ': ' +  record.previousValue + '=>' + record.currentValue) });
    }
}

感谢您的示例Gunter。

我根据您的响应选择快速解决方案。

我用迪奇的实现替换了oninit句柄。现在，如果我的服务中的价值更改外部称为语言，则视图已更新。

在我的案例中：

import { Component, DoCheck } from "@angular/core";
export class LangListUserComponent implements DoCheck {
  constructor(private _languageService: LanguageService)
  {}
  ngDoCheck() {
    /** Get available lang */
    this.oLanguages = this._languageService.getLanguageList();
    this.setCurrentLang(this.oLanguages);
  };
}