来自 firebase 的数据未显示 angular 2 beta答案

【问题标题】：Data from firebase is not displayed angular 2 beta来自 firebase 的数据未显示 angular 2 beta
【发布时间】：2016-11-17 00:36:58
【问题描述】：

当单击按钮但未显示时，我正在尝试显示来自 firebase 的数据。以下是我编写的 3 个文件。

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>

这是我的 firebase 中的分支： pages in firebase

我的代码有什么问题吗？

【问题讨论】：

你使用的是什么版本的angular2？
我使用的是 2.0.0-beta.15
除了建议更新之外，您能否将data => { this.pages = data}更改为data => { console.log(data)}，并在您的答案中添加输出
输出为：Object {about: true, contact: true, home: true, projects: true}

标签： angular firebase firebase-realtime-database

【解决方案1】：

问题在于您的 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)
  );
}

【讨论】：