Firebase angularfire2 Objekt aus Datenbank

Question

Ich habe ein Problem mit einem Objekt, das ich von meinem Firebase db bekomme. Ich kann die JSON-Datei ohne Probleme erhalten, wie Sie auf dem Bild unten sehen können. https://i.gyazo.com/6c1c69aca47f92a4e1029bb019042ab2.png

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

der obige Code ist in /src/app/app.component.html,

dies das Objekt aus /src/app/app.component.ts Artikel recieves

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/'); 
} 
} 

Ich habe auch versucht, item.name. $ Wert, aber es funktioniert nicht. Ich möchte die Werte in der JSON-Datei erhalten. Und in der Lage sein, sie in der Website zu verwenden.

Answer 1

zuerst Sie nicht den Anfang brauchen und endet Strich, wenn nach dem Objekt, wird diese Arbeit:

af.database.object('releases') 

Als nächstes du nicht das json Rohr benötigen, weil Feuerbasis Objekte bereits in json Notation . Ihre HTML kann wie folgt aussehen:

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

Typischerweise jedoch anstelle Ihre Feuerbasis async Objekt direkt auf der Vorlage verwenden, können Sie es in eine Präsentationskomponente passieren würden (auch als stumme Komponente bekannt). Die Präsentationskomponente muss nichts über das asynchrone Verhalten Ihres Objekts wissen, es muss lediglich mit der Generierung des HTML-Codes umgehen. Dies ist ein gängiges Muster beim Umgang mit asynchronen Objekten in Ihrer Vorlage.

So würde Ihre html werden:

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

Das Kind Komponente:

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

Answer 2

als

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

try hier beschrieben:

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