Javascript 连接展平数据

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

模型是这样的：

• 计划
  • 钥匙
  • 名称：string
  • 客户：customerKey
• 顾客
  • 钥匙
  • 名称：string

你有没有一个例子，我是如何使用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;
  }
}

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

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

- customers
  - key
    - name: string

现在，我无法从中的模板访问customer的name属性

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

project.customer.$value

项目。客户。$value

不太清楚您的数据集是什么样子，所以我只想写一个基本示例。假设这样的结构：

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

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

- customers
  - key
    - name: string

示例数据

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

因此，我们在每个项目的

customers

属性中存储客户的密钥

假设我们想列出每个项目，但我们还想获得客户的真实姓名，而不仅仅是他们的id。由于firebase没有加入，我们将不得不手动执行此操作。这里有一种方法：

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

---

如果您想异步获取数据（在本例中，使用模板中的

async

管道），可以将内部

.subscribe

更改为简单的

.map

。

您可以通过显示模板或更好的方式创建plnkr来提供更多上下文吗？嗨，大卫，刚刚在文章中添加了模型描述。模板内部没有什么特别的->“让项目中的项目|异步”。我的问题是，如何从customers表中获取相关的customer.name，同时从“projects”流式传输数据，并将this.project.customer设置为此值谢谢您的回复。确切地说，项目中的customer字段只是对customers表中customer记录的引用。不幸的是，如果我使用您的代码类型“Observable”，则抱怨FirebaseListObservable类型的typescript不能分配给类型“FirebaseListObservable”。类型“Observable”中缺少属性“\u ref”。您可以将

FirebaseListObservable

类型更改为

Observable

，它应该可以工作。+1到@JohnSmith。这是我们正在处理的库的最新问题，它仍处于测试阶段，所以请注意：）而且您还可以获得

project.customers.map

不是函数错误。有人解决了这个问题吗？导入

map

操作符<代码>导入'rxjs/add/operator/map'