如何在單個Angular頁面中顯示Firebase多路徑信息？

Question

我有一個簡單的數據庫是這樣的：

{ 
    "groups": { 
    "123": { 
     "name": "developers", 
     "users": { 
     "1": true 
     }, 
     "users_count": 1 
    } 
    }, 
    "events": { 
    "456": { 
     "name": "Developers conference", 
     "users": { 
     "1": true 
     }, 
     "users_count": 1 
    } 
    }, 
    "users": { 
    "1": { 
     "name": "Jon", 
     "groups": { 
     "123": true 
     }, 
     "events": { 
     "456": true 
     } 
    } 
    } 
} 

在用戶的主頁，我要顯示所有有關團體和活動，如他們的名字的信息。所以，在Homepage班，我這樣做：

獲取用戶的信息後，我檢查它是否有一個組或事件。如果是這樣，我使用key將key的每一個subscribe()加到組或事件中，並在加載後將數據添加到數組中。

export class HomePage { 

    user: FirebaseObjectObservable<any>; 
    groupsKey: Array<any>; 
    groups: Array<any> = []; 

    eventsKey: Array<any>; 
    events: Array<any> = []; 

    constructor(private _auth: AuthService, public afDB: AngularFireDatabase) { 

    this.user = this.afDB.object(`/users/${this._auth.uid}`); 
    this.user.subscribe(user =>{ 

     if(user.groups){ 
     this.groupsKey = Object.keys(user.groups); 
     this.groupsKey.forEach(key => { 
      let groupObservable = this.afDB.object(`/groups/${key}`); 
      groupObservable.subscribe(group => { 
      this.groups.push(group); 
      }) 
     }) 
     } 

     if(user.events){ 
     this.eventsKey = Object.keys(user.events); 
     this.eventsKey.forEach(key => { 
      let eventObservable = this.afDB.object(`/events/${key}`); 
      eventObservable.subscribe(event => { 
      this.events.push(event); 
      }) 
     }) 
     } 

    }) 
    } 
} 

在HTML部分：

<div *ngFor="let item of groups"> 
    {{item.name}}: {{item.users_count}} users 
</div> 

這種方法適用一見鍾情，但是當一些更新的一組或事件製成，重複被壓入陣中，要恢復正常當頁面重新加載時。

在這種情況下什麼可以是更好的實現？我知道我應該刪除陣列並使用async管道，但無法弄清楚如何做到這一點。

Answer 1

如果有人這樣的回答同樣的問題我偶然發現，這裏是我的解決方案：

我擺脫靜態數組和只使用Observables及其經營。

export class HomePage { 

    user: FirebaseObjectObservable<any>; 
    groups: Observable<Array<{}>>; 
    events: Observable<Array<{}>>; 

    constructor(private _auth: AuthService, public afDB: AngularFireDatabase) { 

    this.user = this.afDB.object(`/users/${this._auth.uid}`); 
    this.user.subscribe(user =>{ 

     if(user.groups){ 
     this.groups = Observable.of(user.groups) 
     .map(obj => { 
      let arr = []; 
      Object.keys(obj).forEach((key) =>{ 
      //get an Observable containing the info for each key in user.groups object. 
      arr.push(this.afDB.object(`groups/${key}`)); 
      }) 
      //zip() all Observables in the array 
      let zip = Observable.zip(...arr); 

      //return the emitted values (will return an Observable) 
      return zip; 
     }) 
     //use switchMap() to flatten the Observables 
     .switchMap(val => val) 
     } 

     if(user.events){ 
     this.events = Observable.of(user.events) 
     .map(obj => { 
      let arr = []; 
      Object.keys(obj).forEach((key) =>{ 
      arr.push(this.afDB.object(`events/${key}`)); 
      }) 
      let zip = Observable.zip(...arr); 
      return zip; 
     }) 
     .switchMap(val => val) 
     } 

    }) 
    } 
}