连接扁平数据

Posted 2023-03-08

【中文标题】连接扁平数据

【英文标题】：Joining Flattened Data

【发布时间】：2016-11-20 03:58:38

【问题描述】：

我想将我的客户表中的 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;
  );

我现在不能从模板内部访问客户的名称属性

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

project.customer.$value

【问题讨论】：

您能否通过显示您的模板或更好地创建一个 plnkr 来提供更多上下文？

嗨，大卫，刚刚在帖子中添加了模型描述。模板内部没有什么特别的 - >“让项目的项目|异步”。我的问题是，如何在从“项目”流式传输数据时从客户表中获取相关的 customer.name 并将 this.project.customer 设置为此值

【参考方案1】：

不完全确定您的数据集是什么样子，所以我只写一个基本示例。假设结构是这样的：

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

如果您想异步获取数据，可以将内部.subscribe 更改为简单的.map（在这种情况下使用模板中的async 管道`）。

【讨论】：

感谢您的回复。确切地说，项目中的客户字段只是对客户表中客户记录的引用。不幸的是，打字稿抱怨 FirebaseListObservable 的类型，如果我使用你的代码类型 'Observable' 不能分配给类型'FirebaseListObservable'。 “Observable”类型中缺少属性“_ref”。

您可以将FirebaseListObservable 类型更改为Observable，它应该可以工作。

+1 给@JohnSmith。这是我们正在开发的库的当前问题，它仍处于测试阶段，所以请善待:)

你也会得到project.customers.map is not a function error。有没有人设法解决这个问题？

导入map 运算符。 import 'rxjs/add/operator/map';