如何在单个 Angular 页面中显示 firebase 多路径信息？答案

【问题标题】：How to display firebase multiple path information in a single Angular page?如何在单个 Angular 页面中显示 firebase 多路径信息？
【发布时间】：2017-12-07 08:23:38
【问题描述】：

我有一个这样的简单数据库：

{
  "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 管道，但不知道该怎么做。

【问题讨论】：

标签： angularjs typescript firebase firebase-realtime-database angularfire2

【解决方案1】：

关于

我知道我应该删除数组并使用异步管道，但不知道该怎么做。

当我希望页面侦听来自数据库的更改时，我就是这样做的。我和你一样使用Arrays - 当我实际上不需要观察时，只是一个列表......

.ts
-----
groupsObservable : Observable<any[]>;
eventsObservable : Observable<any[]>;

loadGroups() {
  this.groupsObservable = this.afDB.list("groups/").valueChanges();
}

loadEvents() {
  this.eventsObservable = this.afDB.list("events/").valueChanges();
}

.html
------
<div *ngFor="let g of groupsObservable | async">
  {{ g.name }} 
</div>

<div *ngFor="let e of eventsObservable | async">
  {{ e.name }} 
</div>

【讨论】：

【解决方案2】：

如果有人偶然发现这个答案与我有同样的问题，这是我的解决方案：

我摆脱了静态数组，只使用了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)
      }

    })
  }
}

【讨论】：