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>

（排名|异步）？胜利是更正。使用异步管道等待对象，然后是可选字段（？），然后是字段（.Wins）。