ngForエラー

Question

を引き起こす私のセクションで構成firebase JSONオブジェクトを持っています。セクション内にはセクションスレッドもあります。私は、セクションとスレッドを繰り返し処理しようとしています。問題は、私はこのエラーを取得していている

InvalidPipeArgument： '[オブジェクトのオブジェクト]' 私はスレッド

ための第二* ngForを追加するとき

は、これは私のHTML

あるパイプ 'AsyncPipe' の私firebaseデータベース

から

<div *ngFor="let section of forumSections | async"> 
    <div>Header title: {{section.sectionTitle}}</div> 

<div *ngFor="let thread of section.sectionThreads | async"> 
    <div>Thread title: {{thread.title}}</div> 
</div> 

そして、私のJSONオブジェクト

"forum" : { 
"sections" : { 
    "Y6ML8AA9V5RB2sKFmKndnHFqRw23" : { 
    "sectionThreads" : { 
     "-zqehRPSbalaburpm2dW" : { 
     "description" : "Sup ladies", 
     "title" : "elo mm9" 
     }, 
     "-zqehRPSbalajYGfm2dW" : { 
     "description" : "Sup boi", 
     "title" : "elo m8" 
     } 
    }, 
    "sectionTitle" : "Official" 
    } 
} 

}

私は何かが足りないのですか？どんな助けでも感謝しています。

更新：

import {Component, OnInit} from '@angular/core'; 
import {IonicPage} from 'ionic-angular'; 
import {FirebaseListObservable} from "angularfire2"; 
import {ForumServiceProvider} from "../../providers/forum-service/forum-service"; 

@IonicPage() 
@Component({ 
    selector: 'page-forum', 
    templateUrl: 'forum.html', 
}) 

export class ForumPage implements OnInit { 

    forumSections: FirebaseListObservable<any>; 

    constructor(public forumService: ForumServiceProvider) { 
    } 

    ngOnInit() { 
    this.loadForumData(); 
    } 

    loadForumData() { 
    this.forumSections = this.forumService.getInitialSections(); 
    } 

} 

フォーラムサービス

import {Injectable} from '@angular/core'; 
import 'rxjs/add/operator/map'; 
import {AngularFire, FirebaseListObservable} from "angularfire2"; 

@Injectable() 
export class ForumServiceProvider { 

    constructor(public af: AngularFire) { 
    } 

    /** 
    * Get the forums front facing sections 
    * @returns {FirebaseListObservable<any>} 
    */ 
    getInitialSections(): FirebaseListObservable<any> { 
    return this.af.database.list('/forum/sections'); 
    } 

} 

Answer 1

非同期パイプはそれが必要、あなたがfirebaseを使用しているので、あなたの応答が観察されることを確認し、観測を必要と

forum.ts FirebaseListObservableです。あなたのケースで

、私はあなたがあなたのngFor秒で| asyncを削除した場合、それは配列なので、それはあなたの問題を解決すると思います。

Answer 2

あなたのコメントから、それはあなたの最初のngforが動作するはずのように、それはもう、観察可能ではないので、二番目の文句を言わない仕事を探します、また配列。 ので、あなたはまた、二番目のでasycパイプを削除する配列、に二番目に変換する必要があります。

this.af.database.list('/forum/sections/') 
 
.map(sections=>sections 
 
       .map(section=>Object.keys(section.sectionThreads) 
 
          .map(key=>section.sectionThreads[key])))

私はそれをテストしていない、それは活字ていない、あなたはそれがFirebaseListObservableのあるいくつかの変換