Ionic2：如何从 Firebase Angularfire 读取数据答案

【问题标题】：Ionic2: How to read data from Firebase AngularfireIonic2：如何从 Firebase Angularfire 读取数据
【发布时间】：2018-03-07 22:36:08
【问题描述】：

我正在开发简单的 todo ionic2 应用程序，通过单击一个按钮，我想在视图上显示来自 firebase URL 的数据，当我这样做时我该怎么做我在浏览器控制台上遇到错误：

EXCEPTION: SyntaxError: Unexpected token < in JSON at position 0

或者什么是读取数据的正确方法。

这样提出请求

this.http.request("https://taskionic.firebaseio.com/").subscribe((res) => {
             console.log(res.json())
             this.post = res.json();
    }, (err) => {
        console.log(err)
    })

【问题讨论】：

标签： firebase angularfire ionic2 firebase-realtime-database

【解决方案1】：

您需要在 SystemJS 配置中同时配置 Firebase 和 Angularfire2：

System.config({
  map: {
    firebase: '/node_modules/firebase/lib/firebase-web.js',
    angularfire2: ' node_modules/angularfire2'
  },
  packages: {      
    angularfire2: {
      main: 'angularfire2.js',
      defaultExtension: 'js'
    },app: {
      format: 'register',
      defaultExtension: 'js'
    }
  },
});

然后就可以配置相应的provider了：

import {FIREBASE_PROVIDERS, defaultFirebase, AngularFire} from 'angularfire2';

@App({
  (...)
  providers: [
    FIREBASE_PROVIDERS,
    defaultFirebase('https://[YOUR-APP].firebaseio.com/')
  ]
})
export class MyApp {
  (...)
}

最后注入AngularFire类：

export class SomePage {
  items: Observable<any[]>;

  constructor(af: AngularFire) {
    this.items = af.list('/items');
  }
}

【讨论】：

我添加了提供者：[FIREBASE_PROVIDERS, defaultFirebase('taskionic.firebaseio.com/'),], in app.ts 和 this.posts = af.list('/postsfirebase'); 在主页中，我没有找到任何系统配置或在哪里可以找到此系统配置
事实上，list 方法返回一个你需要订阅的 observable：直接使用subscribe 方法或通过async 管道。看到这个页面：github.com/angular/angularfire2.
Im etting 这个错误：SyntaxError: Unexpected token xyz.firebaseio.com，我遇到同样的错误
也许你可以试试this.http.get 而不是this.http.request。执行的请求是什么？启动 ionic serve... 后，您可以在浏览器中查看开发工具
获取正文、状态、状态文本、标题

【解决方案2】：

请参阅下文如何使用 REST API 解决问题。我在这里发布了一个关于如何使用 AngularFire 解决问题的答案-how to set up firebase with ionic 2 / angular 2 and typescript

这是我使用的方法，因为 Firebase 返回的是对象而不是数组。我遍历快照并创建一个从调用返回的数组

服务

getDataObs(_id) {
    var ref = this.baseRef.child('bookItems')
    //  ref = ref.child(_id)
    var that = this

    return new Observable(observer => {
        ref.on('value',
            (snapshot) => {
                var arr = []

                snapshot.forEach(function(childSnapshot) {
                    arr.push({
                        id: childSnapshot.key(),
                        data: childSnapshot.val()
                    });
                });
                observer.next(arr)
            },
            (error) => {
                console.log("ERROR:", error)
                observer.error(error)
            });
    });
}

组件

this.FBService.getDataObs(data.uid)
    .subscribe((data: Array<any>) => {
        console.log(data)
        this.items = data
    })

HTML 页面

<ion-navbar *navbar>
    <ion-title>
        Home
    </ion-title>
</ion-navbar>

<ion-content class="home">
    <h3 padding>Active User: {{activeUser}}</h3>
    <button (click)="doLogout()">Logout</button>
    <ion-card *ngFor="#item of items">
        <ion-card-header>
            {{item.data.volumeInfo.title}}
        </ion-card-header>
        <ion-card-content>
            {{item.data.volumeInfo.description}}
        </ion-card-content>
    </ion-card>
</ion-content>

完整的解决方案在这里 - https://github.com/aaronksaunders/ionic2-firebase-sample

【讨论】：

Im getting SyntaxError: Unexpected token