Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Nested Angular2 ngFor Directives for Firebase Lists [duplicate]

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

component:

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
            }
        });
    }
}

template:

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

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>

I get the console error, Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

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.

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.

like image 930
J. Adam Connor Avatar asked Oct 30 '22 13:10

J. Adam Connor


1 Answers

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.

like image 119
J. Adam Connor Avatar answered Nov 15 '22 05:11

J. Adam Connor