使用我从firebase db获取的对象时遇到问题。 我可以毫无问题地收到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文件中的值。并且能够在网站上使用它们。
答案 0 :(得分:3)
首先,在搜索对象时不需要开始和结束斜杠,这将起作用:
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;
...
答案 1 :(得分:2)
如此处所述
尝试:
<h1>{{ (item | async)?.gore}}</h1>