5

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.

J. Adam Connor
  • 1,694
  • 3
  • 18
  • 35
  • I don't think so. If I use the actual key `{{participant.adam}}` I get the same console error. I suspect this is related to attempting to iterate over the object `participants` that Angular 2 doesn't recognize as an array. – J. Adam Connor Jan 18 '17 at 01:52
  • `thread.participants` will be an object and will be non-iterable with `ngFor`. That's the core problem and the referenced question's accepted answer should help you with that. – cartant Jan 18 '17 at 01:54
  • Is it that `threads: FirebaseListObservable;` stores `threads` as an array that it's iterable? That would seem to make sense. That would mean this question is more of a usage question that is specific to Firebase/Angularfire2 it seems. Because I need a way to get `participants` into an array of observables when it is a child of a dynamic key that can't be exposed in a direct path. – J. Adam Connor Jan 18 '17 at 02:00
  • 1
    Yep, AngularFire2 `list` observables emit array values, so they are fine with `ngFor`, but any list-ish properties in them will be represented as objects (i.e. keys and values) and `ngFor` cannot be used with those directly. The referenced answer is your solution. (Which is why this is a dupe. Which is not a sin; it's just the way these things are handled.) – cartant Jan 18 '17 at 02:03

1 Answers1

2

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.

Community
  • 1
  • 1
J. Adam Connor
  • 1,694
  • 3
  • 18
  • 35