ngFor内部ngFor导致错误

Question

I have a firebase json object which consists of sections. Inside the sections is also section threads. I'm trying to iterate the sections, and then the threads. Problem is I'm getting this error

InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

when I add the second *ngFor for the threads

This is my HTML

<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>

And my JSON object from my firebase database

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

}

Am I missing something? Any help is appreciated, thanks.

Update:

forum.ts

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

}

Forum Service

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

Async pipe needs an Observable, make sure your response is Observable, since you are using firebase, it should be FirebaseListObservable.

in your case, I think if you remove the | async | async in your second ngFor it will fix your issue since it's an array.

Answer 2

from your comment, it looks like your first ngfor should work, second one wont work because it's not an observable anymore, nor an array . so you need to convert second one into an array, also remove the asyc pipe in second one .

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

I haven't tested it, and it's not typescript, you might need to do some conversion