ngFor 内部 ngFor 导致错误答案

【问题标题】：ngFor inside ngFor causing errorngFor 内部 ngFor 导致错误
【发布时间】：2018-01-11 20:41:30
【问题描述】：

我有一个由多个部分组成的 firebase json 对象。部分内部也是部分螺纹。我正在尝试迭代这些部分，然后是线程。问题是我收到了这个错误

InvalidPipeArgument：管道“AsyncPipe”的“[object 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>

还有来自我的 firebase 数据库的 JSON 对象

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

}

我错过了什么吗？任何帮助表示赞赏，谢谢。

更新：

论坛.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');
  }

}

【问题讨论】：

标签： javascript firebase ionic-framework firebase-realtime-database ionic2

【解决方案1】：

异步管道需要一个 Observable，确保您的响应是 Observable，因为您使用的是 Firebase，所以它应该是 FirebaseListObservable。

在您的情况下，我认为如果您在第二个 ngFor 中删除 | async，它将解决您的问题，因为它是一个数组。

【讨论】：

它属于 FirebaseListObservable。而且我尝试删除异步，但随后它抛出此错误“找不到类型为 'object' 的不同支持对象 '[object Object]'。NgFor 仅支持绑定到 Iterables，例如数组。”
从你的 json 看，它看起来像一个对象而不是一个数组，你做了 db.list('/forumSections');
@ZhangBruce 正确。 ` getInitialSections(): FirebaseListObservable { return this.af.database.list('/forum/sections/'); }`
@ZhangBruce forumSections: FirebaseListObservable;构造函数（公共论坛服务：ForumServiceProvider）{}ngOnInit（）{this.loadForumData（）； } loadForumData() { this.forumSections = this.forumService.getInitialSections();
你需要分享你的数据服务，那个用来从firebase获取数据以更好地检查事情的服务，顺便说一句，你使用了rxjs地图操作符吗？

【解决方案2】：

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

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

我没有测试过，也不是打字稿，你可能需要做一些转换

【讨论】：