Firebase angularfire2 데이터베이스에서 객체 가져 오기

Question

내 firebase db에서 가져온 객체를 사용하는 데 문제가 있습니다. 아래 그림에서 볼 수 있듯이 json 파일을 아무런 문제없이 수신 할 수 있습니다. https://i.gyazo.com/6c1c69aca47f92a4e1029bb019042ab2.png

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

상기 코드는이 /src/app/app.component.ts에서 항목 객체를 접수에

, /src/app/app.component.html에

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 파일에서 값을 가져 오려고합니다. 웹 사이트에서 사용할 수 있습니다.

Answer 1

먼저 시작과 객체 검색 종료 슬래시가 필요하지 않습니다이 작동합니다 : 중포 기지 객체 JSON 표기법에 이미 있기 때문에

af.database.object('releases') 

다음, 당신은 JSON 파이프가 필요하지 않습니다 . 귀하의 HTML은 다음과 같을 수 있습니다

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

는 일반적으로하지만, 대신 템플릿을 직접 중포 기지 비동기 개체를 사용하여, 당신은 (또한 바보 구성 요소라고도 함) 프리젠 테이션 구성 요소에 전달할 것입니다. 프레젠테이션 구성 요소는 객체의 비동기 동작에 대해 알 필요가 없으며 html을 생성하는 방법 만 처리하면됩니다. 이는 템플릿에서 비동기 객체를 처리 할 때 공통적 인 패턴입니다.

그래서 당신의 HTML이 될 것입니다 :

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

하위 구성 요소 :

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

Answer 2

여기에 설명 된대로

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

시도 :

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