连接扁平化数据

IT技术 javascript angular firebase-realtime-database angularfire2
2021-03-03 05:24:52

我想将我的客户表中的 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
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可以将内部更改为简单的。.mapasync

导入map运算符。import 'rxjs/add/operator/map';
2021-04-22 05:24:52
+1 给@JohnSmith。这是我们正在处理的库的当前问题，它仍处于测试阶段，所以请善待:)
2021-04-26 05:24:52
感谢你的回复。确切地说，项目内的客户字段只是对客户表内客户记录的引用。不幸的是，typescript抱怨 FirebaseListObservable 的类型，如果我使用你的代码类型'Observable<any[]>'不可分配到类型'FirebaseListObservable<any[]>'。“Observable<any[]>”类型中缺少属性“_ref”。
2021-05-08 05:24:52
而且你得到project.customers.map的不是函数错误。有没有人设法解决这个问题？
2021-05-12 05:24:52
您可以将FirebaseListObservable类型更改为Observable，它应该可以工作。
2021-05-17 05:24:52
其它你可能感兴趣的问题
上一篇在 <p> 标签内更改值时调用函数 下一篇如何防止直接访问我的 JSON 服务？