如何使用 firebaselist 制作嵌套 *ngFor？答案

【问题标题】：How to make nested *ngFor with firebaselist?如何使用 firebaselist 制作嵌套 *ngFor？
【发布时间】：2018-03-12 01:40:55
【问题描述】：

我想用来自 Firebase 的数据使用 angularFire2 渲染嵌套的 *ngFor。

所以我的数据结构如下：

我想在第一个*ngFor 中使用第一级subjects 列表，在嵌套*ngFor 中使用子级。

<ion-list>
    <ion-item *ngFor="let mainSubject of subjects | async">
        {{mainSubject.name}}
        <ion-list>
            <ion-item *ngFor="let childSubject of mainSubject.subjects | async">
                {{childSubject.name}}
            </ion-item>
        </ion-list>
    </ion-item>
</ion-list>

我想我必须使用 rxjs 中的 map 运算符将列表转换为我需要的内容。

类似这样的：

this.db.list(`${this.mainSubjectsPath}`).map((value) => {
    console.log(value);
    // make some transformation...
});

但地图函数永远不会被调用。

知道我该怎么做吗？

谢谢！

【问题讨论】：

当你像上面那样做的时候发生了什么？
我收到以下错误：运行时错误找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

标签： angular typescript firebase ionic3 angularfire2

【解决方案1】：

发生此错误是因为您尝试迭代对象（主题），而角度模板不支持该对象。 *ngFor 只能应用于数组。

这个问题有几种可能的解决方案：

更改数据结构，以便迭代数组的元素。
编写自定义管道，以遍历对象。示例here。

【讨论】：