Daten von firebase wird nicht angezeigt winkel 2 beta

Question

Ich versuche, die Daten von Firebase anzuzeigen, wenn eine Schaltfläche geklickt wird, aber es wird nicht angezeigt. Unten sind die 3 Dateien, die ich geschrieben habe.

firebase.service.ts

import { Injectable } from 'angular2/core'; 
import { Http, Response } from 'angular2/http'; 

const myFirebase = 'https://*****.firebaseio.com'; 

@Injectable() 
export class FirebaseService { 
    constructor(private _http: Http) {} 

    getPages() { 
     return this._http.get(myFirebase + '/pages_name.json') 
      .map((res:Response) => res.json()); 
    } 
} 

app.component.ts

import { Component } from 'angular2/core'; 
import { FirebaseService } from '../../../firebase.service'; 

@Component({ 
    selector: 'app', 
    template: require('./app.template.html'), 
    providers: [ 
     FirebaseService 
    ] 
}) 

export class LoginTest { 
    public pages; 

    constructor(private _firebaseService: FirebaseService) {} 

    onGetPages() { 
     this._firebaseService.getPages() 
      .subscribe(
       data => { this.pages = data}, 
       error => console.log(error) 
      ); 
    } 
} 

app.template.html

<div class="fixed_width" id="sec2_holder"> 
    <div id="get-pages"> 
     <h2 style="color: white">Get Pages</h2> 
     <button (click)="onGetPages()">Get Pages</button> 
    </div> 
    <ul> 
     <li *ngFor="#page of pages">{{page.name}}</li> 
    </ul> 
</div> 

Er Re ist der Zweig in meiner Firebase: pages in firebase

Alles falsch mit meinem Code?

Answer 1

Das Problem ist, dass die Antwort Ihres Firebase-Aufrufs kein Array ist. Ändern Sie Ihre onGetPages Implementierung zu so etwas, ein Array von Ihrem Ergebnis-Objekt zu erstellen:

onGetPages() { 
    this._firebaseService.getPages().subscribe(
    (data) => { 
     this.pages = []; 
     for(let name in data) { 
      if(data.hasOwnProperty(name) && data[name]) { 
       this.pages.push(name); 
      } 
     } 
    }, 
    error => console.log(error) 
); 
}