Ionic2: Как читать данные из Firebase Angularfire

Question

Я разрабатываю приложение простой todo ionic2, нажав кнопку Я хочу отображать данные в представлении из URL-адреса firebase, как я могу это сделать, когда я это делаю? m получение ошибки на консоли браузера:

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