2016-08-05 16 views
6

Załóżmy, że dane wyglądać takFirebase: łączenie tabel

post: { 
    authorId: '123AA', 
    title: 'first Post', 
    body: 'yay' 
} 

author: { 
    uid: '123AA', 
    displayName: 'Richard' 
    email: '[email protected]' 
} 

chcę renderować post z nazwiskiem autora:

<div className="post"> 
    <div className="title">{post.title}</div> 
    <div className="body">{post.body}</div> 
    <div className="author-name">{post.author.displayName}</div> //problem 
</div> 

Sprowadzona poz postu zawiera autora uid tylko, ale Potrzebuję autora displayName. Jak wypełnić pole autora podczas pobierania postów? To jest to, co zrobić, aby pobrać posty teraz:

const postsRef = firebase.database().ref('posts/') 
postsRef.on('value', (snapshot) => { 
    this.setState({posts: snapshot.val()}) 
}) 
+1

że lepiej usunąć reactjs z tagami, pytanie nie ma nic wspólnego z React – webdeb

+1

O ile cię znam nie można utworzyć "sprzężeń" z firebase, musisz zrobić drugą prośbę, aby uzyskać coś z innej kolekcji –

+1

, więc to, co ludzie robią? Czy dla każdego dodawanego postu wprowadzasz kolejną prośbę o pobranie obiektu użytkownika z serwera? –

Odpowiedz

7

Nie wiem w prawdziwym Firebase, ale używam dołączyć dość często w angular2. Tutaj mój przykładowy kod.

import { Component, OnInit } from '@angular/core'; 
import { AngularFire } from 'angularfire2'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'app', 
    templateUrl: ` 
    <ul> 
     <li *ngFor="let p of posts | async"> 
      {{ p.title }} - {{ (p.authorName | async)?.displayName }} 
     </li>   
    </ul> 
` 
}) 
export class InitComponent implements OnInit { 
    posts: Observable<any[]>; 

    constructor(private af: AngularFire) {} 

    ngOnInit() { 
     this.posts = this.af.database.list('/posts') 
     .map(posts => { 
      posts.map(p => { 
       p.authorName = this.af.database.object('/authors/'+p.authorId); 
      }); 
      return posts; 
     }); 
    } 

Struktura bazy danych w następujący sposób:

/posts/postId/{authorId, title, body} 
/authors/authorId/{displayName, email} 

Nadzieja to pomaga