Question

我正在开发简单的todo ionic2应用程序，点击我想在firebase网址的视图上显示数据的按钮，当我这样做时，我怎么能这样做我得到了一个浏览器控制台出错：

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)
    })

Answer 1

您需要将Firebase和Angularfire2配置到SystemJS配置中：

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'
    }
  },
});

然后您可以配置相应的提供者：

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');
  }
}

Answer 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

Ionic2：如何从Firebase Angularfire中读取数据

2 个答案: