How to make nested *ngFor with firebaselist?

Question

I would like to render nested *ngFor with data coming from Firebase using angularFire2.

So my data are structured like this :

and I want to use the first level of subjects list in a first *ngFor and the child level in a nested *ngFor.

<ion-list>
    <ion-item *ngFor="let mainSubject of subjects | async">
        {{mainSubject.name}}
        <ion-list>
            <ion-item *ngFor="let childSubject of mainSubject.subjects | async">
                {{childSubject.name}}
            </ion-item>
        </ion-list>
    </ion-item>
</ion-list>

I think I have to use the map operator from rxjs to transform the list to what I need.

Something like this :

this.db.list(`${this.mainSubjectsPath}`).map((value) => {
    console.log(value);
    // make some transformation...
});

but the map function is never called.

Any idea of how I can do that?

Thanks!

i get the following error : Runtime Error Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. — user1005016, Sep 30 '17 at 10:16

score 0 · Answer 1 · answered Nov 06 '17 at 16:07

This error happens because you are trying to iterate over an Object (subjects), which is not supported in angular templates. *ngFor can only be applied to an array.

There are several possible solutions to this issue:

change your data structure, so you iterate over the elements of an array.
write a custom pipe, to iterate through an object. Example here.

How to make nested *ngFor with firebaselist?

1 Answers1