3

firebase db から取得したオブジェクトの使用に問題があります。下の図でわかるように、問題なく json ファイルを受信できます。 https://i.gyazo.com/6c1c69aca47f92a4e1029bb019042ab2.png

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

上記のコードは /src/app/app.component.html にあります。

これは /src/app/app.component.ts から item オブジェクトを受け取ります

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ファイルの値を取得したいと思います。そして、それらをウェブサイトで使用できるようにします。

4

2 に答える 2

3

まず、オブジェクトを検索するときに最初と最後のスラッシュは必要ありません。これは機能します。

af.database.object('releases')

次に、firebase オブジェクトは既に json 表記になっているため、json パイプは必要ありません。html は次のようになります。

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

ただし、通常、firebase async オブジェクトをテンプレートで直接使用する代わりに、それをプレゼンテーション コンポーネント (ダム コンポーネントとも呼ばれます) に渡します。プレゼンテーション コンポーネントは、オブジェクトの非同期動作について何も知る必要はありません。必要なのは、html の生成方法を処理することだけです。これは、テンプレートで非同期オブジェクトを処理する場合の一般的なパターンです。

したがって、html は次のようになります。

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

子コンポーネント:

@Component({
    selector: 'my-child-component',
    template: '<h1>{{ item }}</h1>'
})
export class MyChildComponent {
    @Input() item: any;
    ...
于 2016-10-12T18:21:00.070 に答える
2

ここで説明したように

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

試す：

<h1>{{ (item | async)?.gore}}</h1>
于 2016-12-01T20:55:02.293 に答える