javascript - フラット化されたデータの結合

Question

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

モデルは次のようになります。

• プロジェクト

  • 鍵
  • 名前: 文字列
  • 顧客: 顧客キー

• 顧客

  • 鍵
  • 名前: 文字列

angularfire2を使用してangular2コンポーネントからこれを行う方法の例はありますか?

私のコントローラーは次のようになります。

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

アップデート

this.projects のタイプを FirebaseListObservable から Observable に変更しました。私の ngOnInit() メソッドは次のようになります。

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

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

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

project.customer.$value