Firebase angularfire2 从数据库中获取对象答案

【问题标题】：Firebase angularfire2 get object from databaseFirebase angularfire2 从数据库中获取对象
【发布时间】：2016-12-10 05:46:17
【问题描述】：

我在使用从我的 firebase 数据库获取的对象时遇到问题。我可以毫无问题地接收 json 文件，如下图所示。 https://i.gyazo.com/6c1c69aca47f92a4e1029bb019042ab2.png

<h1>{{ item | async | json}}</h1>

以上代码在 /src/app/app.component.html ，

这会从 /src/app/app.component.ts 接收项目对象

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

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
    item: FirebaseObjectObservable<any>;
    constructor(af: AngularFire) {
        this.item = af.database.object('/releases/');
}
}

我也尝试过使用 item.name.$value 但它不起作用。我想获取 json 文件中的值。并且能够在网站中使用它们。

【问题讨论】：

标签： firebase firebase-realtime-database angularfire2

【解决方案1】：

首先你在搜索对象时不需要开始和结束斜线，这样就可以了：

af.database.object('releases')

接下来，您不需要 json 管道，因为 firebase 对象已经采用 json 表示法。您的 html 可能如下所示：

<h1>{{ item | async }}</h1>

但是，通常情况下，您不会直接在模板上使用 firebase 异步对象，而是将其传递给演示组件（也称为哑组件）。表示组件不需要知道对象的异步行为，它只需要处理如何生成 html。这是处理模板中的异步对象时的常见模式。

所以你的 html 会变成：

<my-child-component [item]="item | async">

子组件：

@Component({
    selector: 'my-child-component',
    template: '<h1>{{ item }}</h1>'
})
export class MyChildComponent {
    @Input() item: any;
    ...

【讨论】：

【解决方案2】：

这里描述

https://github.com/angular/angularfire2/blob/master/docs/2-retrieving-data-as-objects.md#retrieve-data

尝试：

<h1>{{ (item | async)?.gore}}</h1>

【讨论】：

它对我有用，但唯一的一件事是我还从 '@angular/common' 包中导入了 CommonModule。