angular - Angular2 overvåg objekt-/array-ændringer (Angular2 final >= 2.1.1)

Jeg vil gerne overvåge et objekt/array, som kan redigeres af en service eller af en controllers rutine. Jeg troede, at en Observable kunne overvåge et objekt/array.

Min implementering reagerer ikke på ændringer af elementerne :

  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;
      }
  })
}

Observables-abonnementet reagerer ikke på ændringer i items-arrayet. Det udløses kun på dens next-metode. På den anden side .. dette er for besværligt for en simpel watch-metode.

Hvad tilbyder Angular-2 os for at overvåge ændringer, som $scope.$watch gjorde i Angular-1?

Svar #1

Angular2 tilbyder IterableDiffer (array) og KeyValueDiffer (objekt) til at få information om forskelle mellem to kontroller.

NgClass er et godt eksempel https://github.com/angular/angular/blob/14ee75924b6ae770115f7f260d720efa8bfb576a/modules/%40angular/common/src/directives/ng_class.ts#L122

Se også https://angular.io/docs/ts/latest/api/#!?query=differ

Et eksempel

// 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
  }
}

Svar #2

I importsektionen:

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

Tilføjelse af 'KeyValueDiffers'-injectoren:

private _differ: any;    

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

Endelig spor ændringer:

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) });
    }
}

Relaterede artikler