【问题标题】:Using Firebase Database (with Imported JSON file) in Ionic 3在 Ionic 3 中使用 Firebase 数据库(带有导入的 JSON 文件)
【发布时间】:2018-02-24 21:11:57
【问题描述】:

我是 Firebase 的新手,我之前有一个 JSON 文件,其中包含我在我的应用程序中使用的数据,这个 JSON 文件托管在我自己的服务器上 - 并且与我的应用程序配合良好。现在我想扩展应用程序并尝试使用 Firebase 来增强它。 我已经创建了一个新帐户,并将我的 JSON 文件导入到 firebase,现在我想知道如何检索这些数据 - 我知道简单地更改我的 JSON 文件的路径可能不仅仅是它!有人可以帮忙吗?

感谢和问候...

【问题讨论】:

    标签: json firebase ionic-framework firebase-realtime-database ionic2


    【解决方案1】:

    我假设您已经在项目中配置了 Firebase 并安装了它,如果不告诉我,我会更新我的答案。

    如果您已将 JSON 数据导入 Firebase,并且您现在可以在控制台上的 database 下看到它,那么您现在只需简单的 .once().on() 即可读取此数据(i'将解释差异)。

    在您要获取数据的页面中执行以下操作:

    import * as firebase from 'firebase';
    
    // LET'S SAY YOU WANT TO FETCH SOMETHING ON HOME PAGE
    export class HomePage {
    
      // THIS IS THE PROPERTY WE'LL USE TO SAVE YOUR DATA
      private myFirebaseData: any;
    
      constructor(){}
    
      // LET'S FETCH DATA WHEN THE USER FIRST LOADS THE PAGE
      ionViewWillLoad(){
        firebase.database().ref('Users').once('value', snapshot => {
          this.myFirebaseData = snapshot.val();
        });
      };
    }
    

    所以解释一下我所做的更多:

    • .ref(<string>) 是您的 firebase 数据库中一个节点的引用,这里我正在获取所有用户。你可以随心所欲,假设你想要一个用户的名字并且你知道他的 ID,你可以使用 .ref(Users/${this.userID}/name) 这将返回他的名字.
    • .once() 用于读取数据一次,value 表示我将获取引用节点中的所有值。您可以使用.on(),这将在该节点中为value 事件创建一个可观察对象。还有其他事件可以与.on() 一起使用,它们是child_addedchild_movedchild_changedchild_removed
    • snapshot.val() 正在获取从我的回调函数返回的所有数据。

    这里有一些有用的文档:

    Read Events

    Querying data

    Read, write, delete, update

    希望这会有所帮助。

    编辑

    假设您尚未将应用配置为使用 Firebase,以下是所需的步骤。只是一个观察:我不使用 AngularFire2,方法可能会有些不同。

    1 - 您需要安装 Firebase,因此在您的项目文件夹中使用命令控制台上的npm install --save firebase

    2 - 在您的 app.component.js 中,您将配置 Firebase 以指向您的项目:

    import * as firebase from 'firebase';
    
    export class MyApp {
      constructor(){
        firebase.initializeApp({
          apiKey: "key",
          authDomain: "domain",
          databaseURL: "https://...",
          projectId: id",
          storageBucket: "bucket",
          messagingSenderId: "id"
        });
      }
    }
    

    3 - 我用来配置 Firebase 的属性可以在您的项目 Firebase 控制台中的 Settings > general > Add app > Add firebase to your web app(或类似的东西)下获得。

    这就是您所需要的,您可以使用 Firebase。

    【讨论】:

    • 您好 Garbriel,感谢您与我们联系!我并不是说听起来很懒惰,但我们可以假装我没有将 Firebase 配置到我的项目中并安装它。我想看看你从一开始就提出的方法,以防我错过了迄今为止所做的事情。到目前为止,我向您发送我的代码可能只会导致很多来回。感谢您的宝贵时间!
    • 一个快速的...我如何在这里使用您的方法捕获错误/显示错误,比如说,数据需要太长时间才能检索或用户未连接到互联网?我尝试了一些“基本”方法,但它们似乎不适用于这种检索数据的方式?也许我遗漏了什么?谢谢。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-09-14
    • 2019-03-16
    • 2018-06-15
    • 1970-01-01
    • 2018-11-07
    • 1970-01-01
    相关资源
    最近更新 更多