如何使用 AngularFire2 加入文档？答案

【问题标题】：How to join documents with AngularFire2?如何使用 AngularFire2 加入文档？
【发布时间】：2016-09-30 19:14:24
【问题描述】：

我有一个 Firebase 中另一个文档的 ID 列表，如下所示：

{
  uid,
  members: [0, 1, 3],
  ...
},

我目前正在像这样加入成员对象：

af.database.list('/threads')
  .map((message) => {
     message.members = message.members.map((memberID) => {
       return af.database.object('/users/' + memberID);
     });
 });

有没有更清洁的方法来做到这一点？

【问题讨论】：

标签： firebase firebase-realtime-database angularfire2

【解决方案1】：

一个想法是创建一个ThreadComponent，它将成员ID传递给处理成员数据的子MemberComponent。

threads.component.html

<div class="thread" *ngFor="let thread of threads$ | async">
  <my-member *ngFor="let memberId of thread.members"
    [memberId]="memberId"></my-member>
</div>

threads.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFire } from 'angularfire2';

@Component({
  selector: 'my-thread',
  templateUrl: 'thread.component.html',
  // ...
})
export class MyThreadComponent implements OnInit {
  threads$;

  constructor (private af: AngularFire) {}
  ngOnInit () {
    this.threads$ = this.af.database.list('/threads');
  }
}

member.component.html

<div>{{ memberInfo$ | async }}</div>

member.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { AngularFire } from 'angularfire2';

@Component({
  selector: 'my-member',
  templateUrl: 'member.component.html',
  // ...
})
export class MyMemberComponent implements OnInit {
  @Input() memberId;
  memberInfo$;

  constructor (private af: AngularFire) {}
  ngOnInit () {
    this.memberInfo$ = this.af.database.list(`/users/${memberId}`);
  }
}

我可以从您当前的方法中看到的一个问题是，您可能正在改变从 angularfire 返回的 observable，这可能会导致不良影响。您可以创建一个不同的变量并将返回的成员 firebase observables 设置为该变量。

【讨论】：