ngFor在ngFor内部引起错误

Question

我有一个火基json对象，它由部分组成。在各节内也有段线程。我试图迭代这些部分，然后是线程。问题是我得到了这个错误

InvalidPipeArgument:管道'AsyncPipe'的' Object‘

当我为线程添加第二个*ngFor时

这是我的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>

​

和我的防火墙数据库中的JSON对象

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

}

我是不是遗漏了什么？任何帮助都是非常感谢的，谢谢。

更新：

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

}

论坛服务

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

异步管道需要一个可观察的，确保您的响应是可观察的，因为您使用的是防火墙，所以应该是FirebaseListObservable。

在您的例子中，我认为如果删除第二个| async中的ngFor，它将修复您的问题，因为它是一个数组。

Answer 2

从您的评论来看，您的第一个ngfor应该可以工作，第二个不起作用，因为它不再是一个可观察的，也不是一个数组。因此，您需要将第二个管道转换为一个数组，还需要删除第二个中的asyc管道。

​

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

​

我还没有测试它，它也不是类型记录，你可能需要做一些转换