firebaseオブジェクトへの私のconsole.log（）は未定義のまま返していますが、コンソールに何もエラーを投げていません。

Question

2番の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> 

これがどのように機能するかを理解することについての私を混乱もう一つは、私たちは、単純なすべてのものを維持するために、小文字と大文字に同じ名前を使用する方法です。何か新しいものを見つけようとするときに、同じ事柄で同じ名前が付けられたときに、どちらが活発であるかを正確に伝えるのは難しいかもしれないので、データがどこに来るのか、それを格納しているローカル変数を参照したり参照したりすることができます。したがって、その領域での少しの助けも同様に評価されます。前もって感謝します。

Answer 1

私はこの解決策を思いついたすべてを読んで周りを突くのを数日後にok。

FirebaseListObservableをFirebaseObjectObservableに変更しました。私はこのように見えるために私のテンプレートを変更した後

はその後app.componentに私は

businessImage: FirebaseObjectObservable<any>; 

に

businessImage: bus_image; 

一部を変更しました。

<div *ngFor="let question of businessImage?.questions"> 
    <h1>{{question.question}}</h1> 
    <ul> 
     <li *ngFor="let answer of question.answers"> 
      {{answer.answer}} 
     </li> 
    </ul> 
</div> 

その後すべてが魅力的に機能しました。入力をいただいた皆様のおかげで、これを理解するために私が調べる必要があったものを理解することは間違いなく助けになりました。