* ngForでFirebaseからインポートされたデータをバインドする際に問題が発生する

Question

私のテンプレートにデータを表示する方法がわかりません。私はconsole.log()を自分のコンポーネントのngOnInitに追加して、サービスがデータを取得して配信していることを確認し、十分な結果が得られることを確認しました。

コンソールのelements部分では、データが入力される場所でこれが表示されます。

<!--template bindings={ 
    "ng-reflect-ng-for-of": "[object Object],[object Object]" 
}--> 

私は周りの名前を変更すると、私は違った、私は未定義のエラーが発生して起動し、それらを注文する必要があるかどうかを確認しようとして結合。しかし、私はそれを持っている方法に戻ると、データを表示しないこと以外はすべてうまく機能します。ここで

は私のアプリのコンポーネントは、これはそれを他の時間をやったときに、それは常に働いています方法ですテンプレート

<h1>{{title}}</h1> 

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

ある

import { Component, OnInit }     from '@angular/core'; 

import { AngularFire, FirebaseListObservable } from 'angularfire2'; 

import { FirebaseService }      from './services/database.service'; 



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 { 
    $key: string; 
    questions: questions[]; 
} 

@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(businessImage); 
     }); 
    } 
} 

です。私も{{question}}と{{questions.question}}の両方でlet question of businessImage.questionsを試しました。いずれにせよ、私はquestionsで未定義のエラーが発生します。

私はインターフェースに1を追加して、データが破損していないかどうかを確認しました。これらの機能がOnInitに邪魔されていないことを確認しました。私はconsole.log()と混乱しているかどうかを確認するために、businessImage: bus_imageの部分を乱用して、テンプレートにデプロイするデータを受信して​​いることを確認しました。

私が考えることができる唯一のことは、firebaseが自動的に鍵を追加したquestions[]とanswers[]の配列を最初にコード化した方法です。誰かがこれについていくつかの光を当てることができますか？

UPDATE

これは私が私のクラスで、今持っているものです。

export class AppComponent { 

    title = 'app works!'; 
    businessImage$: Observable<bus_image>; 

    constructor(private _firebaseService:FirebaseService){ 
     this.businessImage$ = this._firebaseService.getBusImg(); 
     console-log(this.businessImage$); 
    } 

    //ngOnInit() { 
    // this._firebaseService.getBusImg().subscribe(businessImage => { 
    //  this.businessImage$ = businessImage; 
    //  console.log(businessImage); 
    // }); 
    //} 
} 

と、これはエラーが来てされていない、と何もレンダリングされていないと、今console.log()は私ものデータを見つけることができない巨大なオブジェクトを示しているテンプレート

<h1>{{title}}</h1> 

<div *ngFor="let questions of (businessImage$ | async)?.questions"> 
    <h1>{{question.question}}</h1> 
    <ul> 
     <li *ngFor="let answer of questions.answers"> 
      {{answer.answer}} 
     </li> 
    </ul> 
</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> 

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

Answer 2

試してみてくださいこれらの可能な修正：

あなたは非同期データの問題を取得しないことを確認するために、ビュー内の安全な航行（「エルビス」）演算子を使用します

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

第2に、businessImageは配列ではないため、非同期データがリストでない限り、それを反復処理することはできません。この方法で定義してください：

businessImage: bus_image[] = [] 

リストを受信して​​いる場合。

あなたはリストを受信して​​いない場合は、私はこの解決策を考え出した見つけることができるすべてのものを読んでチャンスをうかがっの数日後に

<div *ngFor="let questions of businessImage?.questions"> 

Answer 3

私の問題は、ルールの許可を得ていた：デフォルトでは、彼らはパーマを必要とし、次のように はそうFirebaseルールを変更：

{ 
    "rules": { 
    ".read": true, 
    ".write": false 
    } 
}