javascript - Angular2 Arrays/Observables/Firebase_x_Observable -

i having issues new angular2 function (trying rewrite v1) writing , going round in circles , cannot find advice.

essentially firebase configs hold following

• events

  • random fb key (eventid)

    • event title
    • event location
    • useridowner
    • useridattendee

• usersvsevents

  • userid

    • random key | eventid
    • random key | eventid

the users home page loads of events user has subscribed (eventlist), why created eventsvsuser index tree, rather looping through every event , userid.

i have working (kind of). load eventvsusers tree user, each entry, use eventid load event object events , push eventlist. had reinitialize eventlist every time home page loads using push duplicates events. isn't desireable worked @ stage.

the main problem if make change event in firebase directly, eventlist doesn't make changes, loads duplicate events on top of current ones. suspect because dont have subscribe firebase source directly, instead push elevments seperate array , cant keep in sync. have tried working firebaselistobservables, observables, maps , flatmaps nothing working. code below

  constructor(public http: http, private af: angularfiredatabase, private authservice: authserviceprovider, private afauth: angularfireauth) { this.afauth.authstate.subscribe((user) => {   if (user){   this.uservseventslist = this.af.list('/usersvsevents/' + user.uid);   } }) 

this getevents() function

  getevents()     //need reinitialise, other duplicate results     this.eventslist = [];     this.uservseventslist.subscribe(data => {       data.foreach(element => {           this.af.object('events/' + element.$value).subscribe(singleevent => {           this.eventslist.push(singleevent)         })       });     })     return this.eventlist; 

this concept works in previous version of app, i.e. can push appropriate events array , if make changes via firebase, changes in view synced , consistent firebase.