Firebase 列表的嵌套 Angular2 ngFor 指令

Question

我想使用ngForAngular 2将 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，它是threadswherethread是动态键的子项。所以我不能使用直接路径到participants.

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

Answer 1

对于那些关注此线程并被标记为重复项的人，请不要像已接受的答案所建议的那样创建管道。最佳答案避免了已接受答案的性能问题，并且更简单。