我来回试图学习如何使用角度2来启动和运行firebase。我已经达到了一点，我没有收到任何错误，但我的数据仍然存在似乎没有加载。正如我在angular-cli，angularfire和firebase之间发现的那样，你们在8月刚刚做了很多事情，现在已经过时了，所以很难想象出一系列曲线球。到目前为止，我已经将其理解为最合理的，需要帮助找出问题所在。
这是我上传到firebase的JSON。
{
"home_data" : {
"bus_expand" : {
"bus_image" : {
"questions" : [
{
"question": "How do you feel about your current image?",
"id" : "exp-img-q1",
"name" : "exp-img-ques1",
"answers" : [
{
"answer" : "It's fine as is.",
"id" : "exp0101q"
},
{
"answer" : "I want to make minor adjustments.",
"id" : "exp0102q"
},
{
"answer" : "I want to change my image.",
"id" : "exp0103q"
},
{
"answer" : "I've never wanted to use a particular image until now.",
"id" : "exp0104."
}
]
},
{
"question": "To what degree?",
"id" : "exp-img-q2",
"name" : "exp-img-ques2",
"answers" : [
{
"answer" : "I want the same elements, just put together in a way that works better.",
"id" : "exp0201"
},
{
"answer" : "I want to let go and do something new.",
"id" : "exp0202"
}
]
}
]
},
"bus_tiers" : {
"questions" : [
{
"question" : "Do you have multiple tiers of products, services, campaigns, etc. that need branding?",
"id" : "exp-tier-q",
"name" : "exp-ques3",
"answers" : [
{
"answer" : "Yes",
"id" : "exp0301"
},
{
"answer" : "A couple, but not many",
"id" : "exp0302"
},
{
"answer" : "No",
"id" : "exp0303"
}
]
}
]
},
"bus_content" : {
"questions": [
{
"question": "How do you manage building content for advertising and marketing?",
"id" : "exp-col-q",
"name" : "exp-ques4",
"answers" : [
{
"answer" : "I have enough Abode skills to put things togeather on my own.",
"id" : "exp0401"
},
{
"answer" : "I use an app.",
"id" : "exp0402"
},
{
"answer" : "I find an Artist when I need something.",
"id" : "exp0403"
},
{
"answer" : "I have an inhouse Designer.",
"id" : "exp0404"
}
]
}
]
},
"bus_location" : {
"questions": [
{
"question": "Is your physical location open to the public?",
"id" : "exp-atmo-q2",
"name" : "exp-ques6",
"answers" : [
{
"answer" : "Yes",
"id" : "exp0501"
},
{
"answer" : "No",
"id" : "exp0502"
}
]
},
{
"question" : "Do you have a website?",
"id" : "exp-atmo-q2",
"name" : "exp-ques6",
"answers" : [
{
"answer" : "Yes",
"id" : "exp0601"
},
{
"answer" : "No",
"id" : "exp0602"
}
]
}
]
}
}
}
}
这是用于调用它的服务文件。
import { Injectable } from '@angular/core';
import { AngularFire, FirebaseObjectObservable } from 'angularfire2';
import 'rxjs/add/operator/map';
@Injectable()
export class FirebaseService{
businessImage: FirebaseObjectObservable<bus_image>;
constructor(private af:AngularFire){
}
getBusImg(){
this.businessImage = this.af.database.object('/home_data/bus_expand/bus_image') as FirebaseObjectObservable<bus_image>
return this.businessImage;
}
}
export interface answers {
$key: string;
id: string;
answer: string;
}
export interface questions {
$key: string;
question: string;
id: string;
name: string;
answers: answers[];
}
export interface bus_image {
questions: questions[];
}
我的应用组件
import { Component, OnInit } from '@angular/core';
import { AngularFire, FirebaseObjectObservable } from 'angularfire2';
import { FirebaseService } from './services/database.service';
@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [ FirebaseService ]
})
export class AppComponent implements OnInit {
title = 'app works!';
businessImage: bus_image;
constructor(private _firebaseService:FirebaseService){
}
ngOnInit() {
this._firebaseService.getBusImg().subscribe(businessImage => {
this.businessImage = businessImage;
});
console.log(this.businessImage);
}
}
export interface answers {
$key: string;
id: string;
answer: string;
}
export interface questions {
$key: string;
question: string;
id: string;
name: string;
answers: answers[];
}
export interface bus_image {
questions: questions[];
}
这是HTML模板。
<h1>{{title}}</h1>
<div *ngFor="let question of questions">
<h1>{{questions.question}}</h1>
<p *ngFor="let answer of answers">
{{answers.answer}}
</p>
</div>
另一件让我感到困惑的是理解它是如何工作的是我们使用小写和大写相同的名称来保持一切简单的方式。当看到一些新的东西试图找出它时，很难确切地知道哪些东西在同一个案例中它们都被命名为同一个东西的时候，所以我真的不能告诉哪个部分数据即将到来或正在进行或引用我们将其存储的局部变量。因此，该领域的一点帮助也将受到赞赏。提前谢谢。
答案 0 :(得分：0)
我将实例FirebaseListObservable更改为FirebaseObjectObservable。
然后在app.component我改变了
businessImage: bus_image;
部分到
businessImage: FirebaseObjectObservable<any>;
之后我将模板更改为这样。
<div *ngFor="let question of businessImage?.questions">
<h1>{{question.question}}</h1>
<ul>
<li *ngFor="let answer of question.answers">
{{answer.answer}}
</li>
</ul>
</div>