Below is the code snippet I am working with:
objs = []
getObjs() {
let counter = 0
this.myService.getObjs()
.map((obj) => {
counter = counter > 5 ? 0 : counter;
obj.col = counter;
counter++;
return view
})
.subscribe((obj) => {
console.log(obj);
this.objs = obj;
// I tried this too :
// this.zone.run(() => {
// this.objs.push(obj);
// });
}
, (err)=> console.warn('error in stream', err));
}
The method this.myService.getObjs listens to events from an SSE stream. Here's how it's implemented:
getObjs(){
var es = new EventSource(this.API + '/stream');
return Observable.create((observer: any) => {
es.onmessage = (event) => {
let msg = JSON.parse(event.data)[0];
if(msg === "complete"){
console.log("received 'complete' signal from server");
es.close();
observer.complete();
}
observer.next(msg);
};
});
}
I invoke the above method in ngOnInit and expect the template to update as new events arrive. Template structure is as follows:
<div class="col-md-2">
<thumbnail-dirictive [v]="view" *ngFor="let obj of ( objs | column: 0 )"></orbit-thumbnail>
</div>
While the stream events are logged correctly, the template does not update sequentially based on event arrival time.
I have attempted various solutions including using async pipe in the template, passing values through toArray() method, and also attempting to use reduce function with no success. Is there a working example available for handling irregular stream data updates within ngFor loop?
Edit 1: package.js file info provided below:
{
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0"
}
}
Edit 2: Code snippet for the columns pipe registered in app module provided below :
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'column'})
export class columnPipe implements PipeTransform {
transform(views, col: number): Array {
return views.filter((view) => {
return view.col === col;
});
}
}