AngularFire2 检索对象数据无效，但列表数据有效

Question

我正在尝试使用 Typescript 中的 AngularFire2 从 Firebase 读取数据。我的代码在检索数据列表时使用异步管道，但在获取对象时，我无法访问内容。

Firebase 上的数据结构：(myapp.firebaseio.com/LeagueStandings)

代码子集：

import { Component } from '@angular/core';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';

Standings: FirebaseObjectObservable<any[]>;
constructor(public FirebaseData:AngularFireDatabase) {
    this.Standings = FirebaseData.object('/LeagueStandings');
    // Added the following to see the debug
    this.Standings.subscribe(data => { 
        console.log(data); 
    });
}

HTML 样本位：

<ion-col><ion-badge color="secondary">{{Standings.Wins | async }}</ion-badge></ion-col>

问题是数据永远不会显示。然而，使用 FirebaseData.list 对数组数据（例如个人游戏统计数据）进行同样的操作确实有效。我不知道如何轻松提取页面显示的数据结构。

添加控制台转储确实显示了从 Firebase 返回的数据，但我的 home.html 没有更新。

Answer 1

显然仔细阅读 AngularFire2 documentation 可以解决问题。我注意到文档是如何显示数据的，并更改了我的代码以匹配它，并且它起作用了。 HTML 是我必须更改的全部内容。

import { Component } from '@angular/core';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';

Standings: FirebaseObjectObservable<any[]>;
constructor(public FirebaseData:AngularFireDatabase) {
    this.Standings = FirebaseData.object('/LeagueStandings');
}

HTML 样本位：

<ion-col><ion-badge color="secondary">{{Standings.Wins | async }}</ion-badge></ion-col>

更改为：

<ion-col><ion-badge color="secondary">{{ (Standings | async)?.Wins }}</ion-badge></ion-col>

(Standings | async)?.Wins 是更正。使用异步管道等待对象，然后是可选字段 (?)，然后是字段 (.Wins)。

AngularFire2 检索对象数据无效，但列表数据有效

AngularFire2 retrieve Object data not working, but List data does

firebase

firebase-realtime-database

angularfire2

typescript2.0