【问题标题】:Fetch data from AngularFire2 5.0.0-rc.8 not displaying从 AngularFire2 5.0.0-rc.8 获取数据不显示
【发布时间】:2018-05-22 12:38:39
【问题描述】:

在运行时,我能够从 Chrome 开发人员选项卡网络框架视图中获取数据,但它没有显示在控制台上。 显示“Hello”警报,但不显示“Inside”警报,这很奇怪。 有什么办法可以解决这个问题?

在 app.module.ts 中:

import { AngularFireModule } from 'angularfire2';
//import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database-deprecated';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database'

const firebaseConfig = {
  apiKey: "AIzaSyClxpBtKaVlcr5n-itSoZM_WWTLBqVf-og",
  authDomain: "ionic-abs-conference.firebaseapp.com",
  databaseURL: "https://ionic-abs-conference.firebaseio.com",
  projectId: "ionic-abs-conference",
  storageBucket: "ionic-abs-conference.appspot.com",
  messagingSenderId: "668567626055"
};

内部导入:[...

AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,

在 schedule.ts 中

import {  AngularFireDatabase } from 'angularfire2/database'

类SchedulePage构造函数内

public angFire   : AngularFireDatabase

ionViewDidLoad 内部

this.getDataFire();

然后

getDataFire()
  {
    alert("Hello");
    this.angFire.list('/speakers/0/').valueChanges().subscribe(
      data=> {
        //this.arrData= data;
        alert("Inside");
        console.log(JSON.stringify(data))
      }, (err) => {
        console.log(err);
      }
    )
  }

【问题讨论】:

  • 你有没有在控制台收到任何错误?
  • 没有。没有错误。它现在通过Kim建议的代码更改来解决。谢谢!

标签: javascript ionic-framework firebase-realtime-database ionic3 angularfire5


【解决方案1】:

如果您尝试从 firebase 数据库中获取对象列表,请尝试以下操作:

import * as firebase from "firebase";
...
public list: Array<any> = [];
public listRef: firebase.database.Reference = firebase.database().ref('/speakers/0/');
...
this.listRef.on('value', itemSnapshot => {
  this.list = [];
  itemSnapshot.forEach( itemSnap => {
    this.list.push(itemSnap.val());
    return false;
  });
});

【讨论】:

  • 非常感谢。这行得通!我可以从中阅读更多有关此内容的任何资源吗?因为 AngularFire2 v5 并没有太多的文档,所以这段代码 sn-p 看起来有点新意。 itemSnapshot 与 .valueChanges().subscribe 有何不同?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-11-20
  • 2018-03-21
  • 1970-01-01
  • 2020-07-16
  • 2016-12-10
  • 2018-03-23
  • 2017-08-15
相关资源
最近更新 更多