Joining Flattened Data
<p>i'd like to join the data on init from my customers table into the projects list. </p>

<p>Model is like this:  </p>

<ul>
<li><p>projects  </p>

<ul>
<li>key  </li>
<li>name: string  </li>
<li>customer : customerKey  </li>
</ul></li>
<li><p>customers  </p>

<ul>
<li>key</li>
<li>name: string</li>
</ul></li>
</ul>

<p>Do you have an example, how i do this from angular2 component using angularfire2?</p>

<p>my controller looks like this:</p>

<pre><code>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&lt;any[]&gt;;
  customers: FirebaseListObservable&lt;any[]&gt;;
  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;
  }
}
</code></pre>

<p><strong>Update</strong></p>

<p>i've changed the type of this.projects to Observable from FirebaseListObservable
my on ngOnInit() method looks now like this:</p>

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

<p>i can now access not the name property of customer from the template inside of</p>

<pre><code>&lt;li *ngFor="let project of projects | async"&gt;

project.customer.$value
</code></pre>