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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With