在离子 3 角度 4 的火力基础中从一对多关系中检索数据答案

【问题标题】：Retrieving data from one to many relation in firebase of ionic 3 angular 4在离子 3 角度 4 的火力基础中从一对多关系中检索数据
【发布时间】：2017-09-04 18:58:54
【问题描述】：

这是我的一对多 firebase 关系；

{
  "factory_sites" : {
    "site 1" : {
      "Name" : "Factory 1",
      "Address" : "Malabe",
      "factory_site_lines":{
        "-FSL0000001" : {
          "Name" : "Line 1"
        },
        "FSL0000002" : {
          "Name" : "Line 2"
        }
      }
    },
    "site 2" : {
      "Name" : "Factory 2",
      "Address" : "Malabe",
      "factory_site_lines":{
        "FSL0000001" : {
          "Name" : "Line 1"
        },
        "FSL0000002" : {
          "Name" : "Line 2"
        },
        "FSL0000003" : {
          "Name" : "Line 3"
        }
      }
    },
    "site 3" : {
      "Name" : "Factory 3",
      "Address" : "Malabe",
      "factory_site_lines":{
        "FSL0000002" : {
          "Name" : "Line 2"
        },
        "FSL0000004" : {
          "Name" : "Line 4"
        },
        "FSL0000005" : {
          "Name" : "Line 5"
        }
      }
    }
  }
}

这是我为检索数据而编写的示例代码；

   import { Component } from '@angular/core';
   import { IonicPage, NavController, NavParams } from 'ionic-angular';
   import { AngularFireDatabase, FirebaseListObservable } from'angularfire2/database';

    @Component({
       selector: 'page-factory',
       templateUrl: 'factory.html',
    })
    export class FactoryPage {

        sites: FirebaseListObservable<any[]>;

     constructor(public navCtrl: NavController, public navParams:NavParams,private af: AngularFireDatabase) 
     {
      this.sites = af.list('/factory_sites');
      console.log(this.sites);  
     }
    }

控制台日志结果显示；

Object { _isScalar: false, $ref: Object, source: Object, operator: Object }

我正在开发一个 ionic 移动应用程序。 ionic 3 版本，带有 angular 4，使用 firebase 实时数据库。所以我坚持在firebase中从一对多关系中检索数据。我也想检索具有子关系的工厂站点的数据。我试图访问“/factory_sites”路径，但结果是空对象。我遵循了一些教程，但那些没有更新，不适合我的问题。如何从 factory_sites 中检索具有子关系的数据？

任何帮助将不胜感激？谢谢！

【问题讨论】：

标签： angular firebase firebase-realtime-database ionic3

【解决方案1】：

您需要订阅数据才能查看它。您目前正在尝试查看可观察对象。

您可以使用异步管道访问 html 中的数据

<div>{{ sites | async }}</div>

或者，如果您想在组件中访问它，您可以执行以下操作

this.sites.subscribe(sites => {
  console.log(sites);
});

注意订阅，因为 Angular 不会自动取消订阅，您需要手动执行此操作。

【讨论】：