I have a tagging system implemented in Firebase, using following structure:
Now, I want to create a list of all photos with tag of id tag_id_1. First, I need to retrieve /tags/tag_id_1 for collecting the ids, then I need to retrieve the corresponding photo data from Firebase.
I'm using the Angularfire2 library, along with Ionic 2.
The code I've written up until now is something like this:
this.posts = af.database.list('/tags/tag_id_1')
.map((items) => {
console.log(items);
return items.filter(item => item.$value).map((item) => {
let id = item.$key;
return af.database.object(`/photos/${id}`);
});
});
this.posts.subscribe();
<ion-list>
<ion-item *ngFor="let post of posts | async" class="text" >
{{ post }}
</ion-item>
</ion-list>
But it doesn't seem to do the trick. Moreover, this would generate a new array of photo objects every time an id is added to the collection. Therefor, I tried implementing it differently:
this.posts = Observable.create(observer => {
var ref = _cloud.ref('/tags/tag_id_1');
ref.on('child_added', (snapshot) => {
console.log(snapshot.key);
observer.next(_cloud.object(`/photos/${snapshot.key}`));
});
});
this.posts.subscribe();
Which would only fire the updated photo. But I can't get it to render.
Has anyone ever had a similar issue? I had a look at Nested Observables in Angular2 using AngularFire2 not rendering in view (my first solution is inspired on that post), but I can't get it to work properly.
