如何显示在一个单一的角度页面火力点多路径的信息?

问题描述 投票:0回答:2

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

{
  "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类,我这样做:

获取用户的信息后,我检查是否有一组或事件。如果是这样,我得到每一个的keysubscribe()使用key组或事件并且它被加载后的数据添加到阵列。

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
2个回答
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)
      }

    })
  }
}

1
投票

关于

我知道我应该删除阵列和使用异步管,但无法弄清楚如何做到这一点。

这就是我如何做到这一点时,我希望页面侦听来自DB的变化。我用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>
© www.soinside.com 2019 - 2024. All rights reserved.