本文介绍了用于Firebase列表的嵌套Angular2 ngFor指令的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I want to bind the results of a Firebase query to my template using ngFor in Angular 2. This is easily achieved below.

组件:

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指令来列出子对象的键...

But if I want to use another ngFor directive nested within the template to list a child object's keys...

<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.

在我的数据库结构中,participantsthread的子级,它是threads的子级,其中thread是动态键.所以我不能使用直接路径到participants.

In my database structure, participants is a child of thread, which is a child of threads where thread is a dynamic key. So I can't use a direct path to participants.

这种嵌套ngFor指令的模式在只对本地文件进行迭代的服务中效果很好.为什么它在这里不起作用对我来说有点模糊.

This pattern of nesting ngFor directives worked fine in a service that simply iterated over a local file. Why it isn't working here seems a bit fuzzy to me.

推荐答案

对于那些将此线程标记为重复的线程的人,请像接受的答案所示创建一个管道. 最佳答案避免了,并且更为简单.

For those of you who follow this thread to the one it is flagged as a duplicate of, resist creating a pipe like the accepted answer suggests. The best answer avoids the performance issues of the accepted answer and is much simpler.

这篇关于用于Firebase列表的嵌套Angular2 ngFor指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 02:35