Question

我点击按钮时会尝试显示来自firebase的数据但是没有显示。以下是我写的3个文件。

firebase.service.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.component.ts

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

app.template.html

{{1}}

这是我的firebase中的分支： https://msdn.microsoft.com/en-us/library/cdb9dcxt(v=vs.110).aspx

我的代码有什么问题？

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

来自firebase的数据未显示为角度2 beta

1 个答案: