与angularfire2和firebase的双向关系

时间:2017-07-27 12:25:08

标签: javascript angular firebase firebase-realtime-database angularfire2

我最近开始使用firebase,我对Ionic有一些经验,所以我决定开发一个使用firebase的应用程序。

我目前遇到双向关系问题。我有用户和组,因此用户可以拥有多个组,并且组可以拥有多个用户。我在firebase上阅读了关于这些数据库类型的文档,并按照他们的建议构建我的数据库:

groups
--group1
----participants
------user1
------user2
--group2
----participants
------user1
users
--user1
----groups
------group1
------group2
--user2
----groups
------group1

我希望拥有"实时功能"比如当你打电话时

db.list('/users') 

一切都在自动同步。

现在我做到了

this.groupKeySubscription = db.list('/users/' + this.authProvider.getUserId() + '/groups').subscribe(groupKeys => {
  this.groups = [];
  groupKeys.forEach(groupInfo => {
    this.db.object('/groups/' + groupInfo.$key).take(1).subscribe((group) => {
      this.groups.push(group);
    })
  })
});

问题在于,每次数据更改时,我的groups数组都会被清除并填充,因此屏幕会像ms一样闪烁(我觉得它效率不高)。

有没有办法避免这种情况?或者我应该在每次更新数据时检索数据并在我的阵列上循环以修改已更新的内容?

由于

1 个答案:

答案 0 :(得分:0)

感谢mohamad rabee,我最终使用了他的链接解决方案

this.groups2 = this.db.list('URLtoGroupKeys').map(groupKeys => {
  return groupKeys.map(key => {
    key.data = this.db.list('URLtoGroup');
    return key
  })
})

并在视图中

<ion-card *ngFor="let group of groups2 | async" (press)="presentActionSheet(group)" (click)="setCurrentGroup(group)" [ngClass]="{'active': group==currentGroup}">
  <ion-card-header *ngFor="let data of group.data | async | slice:1:2">{{data.$value}}</ion-card-header>
  <ion-card-content *ngFor="let data of group.data | async | slice:0:1">{{data.$value}}</ion-card-content>
</ion-card>

对我来说,切片管的使用并不是最美丽的解决方案,但它的工作效果非常好

唯一的问题是,我不太了解.ts文件中的五行... 我得到db.list()部分,地图就像一个foreach或者它是否优越(具有更多功能)?