I am trying to attach values from a FirebaseObjectObservable to d3 svg nodes in an Angular 2 component. It works using a local variable in the format:
myLocalVar = [{"Id":"Value"}, {"Id":"Value"}];
When I log myLocalVar to the console, I see this:
[Object, Object...]
When I click the expand button, it displays this:
ConsoleLog myLocalVar Expanded
When I subscribe to a FirebaseObjectObservable and attempt to bind the data, the data won't bind. When I look in the console, I see an array of objects, but the top level form looks different. The console initially displays only a set of array brackets:
[]
Expanding the view of the array in the console displays this:
ConsoleLog Observable Expanded 1
The objects inside both myLocalVar and the FirebaseObjectObservable are identical.
I am guessing that there is some difference between the two types of arrays because of how they present differently in the console at their top level. I am curious as to why the observable array would present as Array[0] even though it has objects in it. How might the arrays be different if they are both arrays with what looks like the same number of objects with the same object composition?
Any idea how I can get the array returned from the observable to mirror the form of the local variable?
In case it is needed, here is my code for defining and subscribing to the observable:
this.objData$ = af.database.object('/data');
this.objData$.flatMap(result => result)
.subscribe(
result => this.componentVar.push(result), //the componentVar is type 'any'; I've also tried type '[]'
error => console.log(error),
);
Any ideas on what I am doing wrong?
Thanks for any advice you have on this!
