フラット化されたデータに結合

Question

私の顧客テーブルのinitのデータをプロジェクトリストに結合したいと思います。

モデルは、このようなものです：

• キー

  • プロジェクト

  • 名：文字列
  • 顧客：customerKey

• 顧客

  • キー
  • 名前：あなたは私がangularfire2を使用してangular2コンポーネントからこれを行う方法を、例を文字列

を持っていますか？

私のコントローラは次のようになります：私は私のngOnInitに（）メソッドは次のように今見えるFirebaseListObservable から観察可能にthis.projectsの種類を変更した

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; 
    } 
} 

更新

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; 
    }); 
} 

これで、顧客の名前のプロパティではなく、内部のテンプレートからアクセスできるようになりました

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

project.customer.$value 

Answer 1

データセットの見た目が正確ではないので、基本的な例を書きます。このような構造のものを想定すると：

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

- customers 
    - key 
    - name: string 

例のデータだから我々はcustomers財産、顧客のすべてのプロジェクトでキーを保存している

- 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" 

。

すべてのプロジェクトをリストしたいとしますが、idだけでなく、顧客の実際の名前も取得したいとします。 firebaseには結合がないので、これを手動で行う必要があります。あなたは（この場合にはtemplate`でasyncパイプを使用して）非同期でデータを取得したい場合

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; 
    }); 
    }); 

インナー.subscribeはシンプル.mapに変更することができます。ここではそれを行うための一つの方法です。