加入展平数据 [英] Joining Flattened Data

问题描述

我想从客户表中将init的数据加入到项目列表中。

模型是这样的：

• 项目

  
  $ b
  
  
  • 键
  
  
  • 名称：字串
  
  
  • customer：customerKey
  
  
  

  • 客户

  >
  
  • name：string
  
  

例如，我如何从angular2组件使用angularfire2做到这一点？

我的控制器看起来像这样：

 从'@ angular / core'导入{Component，OnInit}; 
从'../project'导入{Project}; 
从'@ angular / router'导入{Router}; 
从'angularfire2'导入{FirebaseAuth}; 
从'angularfire2'导入{AngularFire，FirebaseListObservable，FirebaseObjectObservable}; 
从'rxjs'导入{Observable}; 
 $ b @Component（{
 moduleId：module.id，
 selector：'app-projects'，
 templateUrl：'projects.component.html'，
 styleUrls：['projects.component.css'] 
}）
 export class ItemsComponent implements OnInit {
 
 projects：FirebaseListObservable< any []> ;; 
 customers：FirebaseListObservable< any []>; 
 projectName：string; 
构造函数（
私有路由器：路由器，
私人af：AngularFire 
）{}; 
 
 ngOnInit（）{
 this.projects = this.af.database.list（'projects'）; 
 
 
（projectName：string）{
 this.af.database.list（'projects'）
 .push（{name：projectName，id： '123'}）; 
 this.projectName = null; 
 
 
 
 
 
 更新 
 
 
 
我已经将this.projects的类型从FirebaseListObservable改为Observable 
我的on 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; 
}）; 
 
 $ / code> 
我现在可以不在
 < li * ngFor =let project of projects | async> 
 
 project.customer。$ value 
  
 
 
解决方案
不完全确定你的数据集是怎样的，所以我只是写一个基本的例子。假设这样的结构：
 
 
   -  projects 
  -  key 
  -  name：string 
  -  customers 
  -  customerKey：boolean 
 $ b  -  customers 
  -  key 
  -  name：string 
   
 
 示例数据  
 
 
   -  projects 
  -  projectId1 
  -  name：Cool project！，
  -  customers 
  -  customerId1：true，
  -  customerId2：true 
  -  projectId2 
  -  name：另一个很酷的项目！，
  -  customers 
  -  customerId2：true，
  -  customerId3：true 
 $ b  -  customers 
  -  customerId1 
  -  name：John Smith
  -  customerId2 
  -  name：John Doe
  -  customerId3 
  -  name：John John
  
所以我们把客户的钥匙储存在每个项目的 customers  property。
 
 
 
假设我们要列出每个项目，但是我们也想获取客户的真实姓名，而不仅仅是他们的ID。由于firebase没有连接，因此我们必须手动执行此操作。这是一种方法：
 
 $ p $  this.projects = this.af.database.list（`projects`）
 .map（projects => {
 return projects.map（project => {
 project.customers.map（customer => {
 this.af.database.list （客户）
 .subscribe（c => {
 customer = c; 
}）; 
}）; 
 return project; 
} ）; 
}）; 
  
内部 .subscribe 可以更改为一个简单的 .map ，如果你想异步获取数据（在这种情况下，在模板中使用 async  ）。
 
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

解决方案
Not exactly sure how your dataset looks like, so I'm just going to write a basic example. Assuming a structure something like this:
- projects
  - key
    - name: string
    - customers
      - customerKey: boolean

- customers
  - key
    - name: string
Example data
- 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"
So we're storing the customers' key in every projects' customers property.

Let's say we want to list every projects, but we also want to get the customers' real name as well, not just their id. Since firebase doesn't have joins we'll have to do this manually. Here's one way to do it:
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;
    });
  });
The inner .subscribe could be changed to a simple .map if you want to get the data asynchronously (in this case use the async pipe in the template`).

                        
这篇关于加入展平数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！