Łączenie spłaszczonych danych

Question

Chciałbym dołączyć do danych o init z mojej tabeli klientów do listy projektów.

modelu jest tak:

• projekty

  • kluczowe
  • name: String
  • klientów: CustomerKey

• klienci

  • klucz
  • name: string

Czy masz przykład, jak zrobić to z wykorzystaniem angularfire2 angular2 komponentu?

mój kontroler wygląda następująco:

import { Component, OnInit } from '@angular/core'; 
import { Project } from '../project'; 
import { Router } from '@angular/router'; 
import { FirebaseAuth } from 'angularfire2'; 
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2'; 
import { Observable } from 'rxjs'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-projects', 
    templateUrl: 'projects.component.html', 
    styleUrls: ['projects.component.css'] 
}) 
export class ProjectsComponent implements OnInit { 

    projects: FirebaseListObservable<any[]>; 
    customers: FirebaseListObservable<any[]>; 
    projectName: string; 
    constructor(
    private router: Router, 
    private af: AngularFire 
) { }; 

    ngOnInit() { 
    this.projects = this.af.database.list('projects'); 
    } 

    add(projectName: string) { 
    this.af.database.list('projects') 
     .push({ name: projectName, id: '123' }); 
    this.projectName = null; 
    } 
} 

Aktualizacja

Zmieniłem typ this.projects do Obserwowalne z FirebaseListObservable My na ngOnInit() metoda wygląda teraz tak:

ngOnInit() { 
this.projects = this.af.database.list(`projects`) 
    .map(projects => { 
    projects.map(project => { 
     this.af.database.object('customer/' + project.customer + '/name') 
     .subscribe(customer => { 
      project.customer = customer; 
     }) 
     return project; 
    }) 
    return projects; 
    }); 
} 

Mogę teraz uzyskać dostęp do właściwości nazwy klienta z szablonu wewnątrz z

<li *ngFor="let project of projects | async"> 

project.customer.$value 

Answer 1

Nie jestem pewien, jak wygląda twój zestaw danych, więc po prostu napiszę prosty przykład. Zakładając strukturę coś takiego:

- projects 
    - key 
    - name: string 
    - customers 
     - customerKey: boolean 

- customers 
    - key 
    - name: string 

Przykładowe dane

- projects 
    - projectId1 
    - name: "Cool project!", 
    - customers 
     - customerId1: true, 
     - customerId2: true 
    - projectId2 
    - name: "Another cool project!", 
    - customers 
     - customerId2: true, 
     - customerId3: true 

- customers 
    - customerId1 
    - name: "John Smith" 
    - customerId2 
    - name: "John Doe" 
    - customerId3 
    - name: "John John" 

więc jesteśmy przechowywanie klucz w każdym projektów klientów customers nieruchomości.

Załóżmy, że chcemy wyświetlić listę wszystkich projektów, ale chcemy również uzyskać prawdziwe imię klienta, a nie tylko jego identyfikator. Ponieważ baza ogniowa nie ma złączeń, musimy to zrobić ręcznie. Oto jeden ze sposobów, aby to zrobić:

this.projects = this.af.database.list(`projects`) 
    .map(projects => { 
    return projects.map(project => { 
     project.customers.map(customer => { 
     this.af.database.list(`customers`) 
      .subscribe(c => { 
      customer = c; 
      }); 
     }); 
     return project; 
    }); 
    }); 

Wewnętrzna .subscribe może zostać zmieniona na zwykłą .map jeśli chcesz uzyskać dane asynchronicznie (w tym przypadku użyć rury w template` async).