Is it possible to achieve the same functionality without using the "interval()" method?
I would like to link an array to an observable, and update the array as well as have the observable monitor the changes.
If this approach is feasible, how can we incorporate the .distinctUntilChanged() function to ensure that new values are not emitted if they are the same, thereby preventing the "interval(10)" from becoming a bottleneck?
For reference, here is the Plunker: http://plnkr.co/edit/xlWSTz8gNfByTnT1REw5?p=preview
import {Component} from 'angular2/core';
import * as Rx from 'rxjs/Rx'
@Component({
selector: 'a-webapp',
template:`
<div>
<h2>{{name}}</h2>
<button (click)="addToArray()">Add</button> <button (click)="resetArray()">Reset</button>
<ul>
<li *ngFor="let item of latest$ | async">{{ item | json }}</li>
</ul>
{{ data | json }}
</div>
`
})
export class AppComponent {
data = ["one", "two", "three"]
data$: Rx.Observable<Array<string>>;
latest$: Rx.Observable<Array<string>>;
constructor() {}
ngOnInit() {
this.data$ = Rx.Observable.interval(10).concatMap(y => {
return Rx.Observable.of(this.data)
})
this.latest$ = Rx.Observable.combineLatest(this.data$, (data) => {
return data.map(d => {
return d + " is a number"
})
})
}
addToArray() {
this.data.push('more numbers')
}
resetArray() {
this.data = ["one", "two", "three"]
}
}