I am new to Angular 4.3. I have a mapping application that displays a “map layer” by loading a series of small images (“tiles”). At startup, the map layer may take from 0.1 to 5.0 seconds to load.
I need to trigger an event when the client received two or more fragments. I thought I could achieve this by signing up for an Observable, which retries up to 30 times, in an interval of 200 ms.
Still:
public updateTileContainer() {
this._getTileContainer().subscribe(container => {
if (container) {
console.log('* do stuff with container *');
}
});
}
private _getTileContainer(): Observable<any> {
return Observable.interval(200)
.mergeMap(function (n) {
const tileImages = $('#mymap').find('img[src*=\'kml\']');
console.log(`Retry ${n}: ${tileImages.length} tiles found`);
if (!tileImages || tileImages.length < 2) {
return Observable.of(null);
}
const tileContainer = getContainer(tileImages);
return Observable.of(tileContainer);
})
.take(30);
}
It works! Like. I get this output:
Retry 0: 0 tiles found
Retry 1: 0 tiles found
Retry 2: 0 tiles found
Retry 3: 0 tiles found
Retry 4: 0 tiles found
Retry 5: 0 tiles found
Retry 6: 0 tiles found
Retry 7: 2 tiles found
* do stuff with container *
Retry 8: 3 tiles found
* do stuff with container *
Retry 9: 9 tiles found
* do stuff with container *
Retry 10: 12 tiles found
* do stuff with container *
etc.
What I'm actually trying to do is to emit one event in "Retry 7" and then stop dispensing.
, "" , ? "" 0 6, ? Observable, 30 , ?