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>

我得到控制台错误，找不到类型为“object”的不同支持对象“[object object]”。NgFor仅支持绑定到数组等可迭代项。

在我的数据库结构中，participants是threads的子级，而threads是threads的子级，其中threads是动态键。因此我无法使用直接路径来访问参与者。

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

Answer 1

对于那些跟随这个线程到它被标记为重复的线程的人，不要像公认的答案所建议的那样创建管道。最佳答案避免了已接受答案的性能问题，而且简单得多。