Angular2 observe array objects / changes (Angular2 final> = 2.1.1)

Question

I would like to see an object / array that can be edited by a service or controller routine. I thought Observable could observe an object / array.

My implementation does not respond to element changes:

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

The Obsalbes hint does not respond to changes to the array of elements. This only works on his next method. On the other hand, it is too cumbersome for a simple observation method.

What angular -2 offers for viewing changes like $ scope. did $ watch do in angular -1?

Answer 1

Angular2 provides IterableDiffer (array) and KeyValueDiffer (object) to get information about the differences between the two checks.

NgClass is a good example https://github.com/angular/angular/blob/14ee75924b6ae770115f7f260d720efa8bfb576a/modules/%40angular/common/src/directives/ng_class.ts#L122

See also https://angular.io/docs/ts/latest/api/#!?query=differ

Example

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

Answer 2

In the import section:

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

Adding a KeyValueDiffers injector:

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

Finally, track changes:

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

Answer 3

Thanks for your Gunter example.

I choose a quick solution based on your answer.

I am replacing the OnInit handle with a DoCheck implementation. Now, if the change in value in my external service called Language is updated.

In my example:

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