Angular2 ngFor Nested Directives for Firebase Lists

Question

I want to bind the Firebase query results to my template using ngFor in Angular 2. This is easy to do 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 embedded in the template to list the keys of the child objects ...

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

I get a console error, Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. 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. Therefore, I cannot use the direct path to participants .

This nesting ngFor directive template worked fine in a service that just repeated over the top of the local file. Why it doesn't work here seems a little fuzzy to me.

Answer 1

For those of you who are following this stream, the one to which it is marked as duplicate resists creating a pipe, as the accepted answer suggests. A better answer avoids performance issues with the accepted answer and is much simpler.