javascript - Joining Flattened Data

Question

i'd like to join the data on init from my customers table into the projects list.

Model is like this:

• projects

  • key
  • name: string
  • customer : customerKey

• customers

  • key
  • name: string

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

my controller looks like this:

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

Update

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

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

i can now access not the name property of customer from the template inside of

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

project.customer.$value

Answer 1

Waitting for answers