用于 Firebase 列表的嵌套 Angular2 ngFor 指令

Question

我想在 Angular 2 中使用 ngFor 将 Firebase 查询的结果绑定到我的模板。这很容易在下面实现。

组件：

export class FeaturedThreadsComponent { 
    threads: FirebaseListObservable<any[]>;
    qualitySubject: Subject<any>;

    constructor(af: AngularFire) {
        this.qualitySubject = new Subject();
        this.threads = af.database.list('/threads', {
            query: {
                orderByChild: 'quality',
                endAt: 5
            }
        });
    }
}

模板：

<div *ngFor="let thread of threads | async">
    {{thread.title}}
</div>

但是如果我想使用嵌套在模板中的另一个 ngFor 指令来列出子对象的键...

<div *ngFor="let thread of threads | async">
    {{thread.title}}
    <div *ngFor="let participant of thread.participants">
        {{participant.$key}}}
    </div>
</div>

我收到控制台错误，Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

在我的数据库结构中，participants 是 thread 的子项，thread 是 threads 的子项，其中 thread 是动态键。所以我不能使用 participants.

的直接路径

这种嵌套 ngFor 指令的模式在简单迭代本地文件的服务中运行良好。为什么它在这里不起作用对我来说有点模糊。

Answer 1

对于那些关注此线程的人来说，它被标记为重复的线程，请不要像接受的答案所建议的那样创建管道。 avoids the 已接受的答案，并且更简单。

用于 Firebase 列表的嵌套 Angular2 ngFor 指令

Nested Angular2 ngFor Directives for Firebase Lists

firebase

firebase-realtime-database

angularfire2

angular