来自firebase的数据没有显示角度2测试版

我试图显示来自firebase的数据，当点击一个按钮但它不显示。以下是我写的3个文件。来自firebase的数据没有显示角度2测试版

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>

他re是我的firebase中的分支： pages in firebase

我的代码有什么问题吗？

来源

2016-07-14 Yin

您使用的是什么版本的'angular2'？ – PierreDuc

我正在使用2.0.0-beta.15 – Yin

除此之外，建议您更新，您是否可以将'data => {this.pages = data}'更改为'data => {console.log（data）}' ，并在你的回答中添加输出 – PierreDuc

问题是您的firebase调用的响应不是数组。将onGetPages实现更改为如下所示，以便从结果对象中创建一个数组：

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

来源

2016-07-14 10:10:34 PierreDuc

来自firebase的数据没有显示角度2测试版

回答

相关问题