Using ngFor item as key in an Observable list

Question

I'm extremely new to Angular and really excited so far at how powerful it is. I'm using the angularfire2 library to retrieve two separate lists from firebase (*.ts):

this.list1= this.db.list("list1").valueChanges();
this.list2= this.db.list("list2").valueChanges();

While looping over the first list with *ngFor, I want to use list1.val as a key in obtaining a list2 value

(list2[list1.val].name).

I run into lots of different errors when trying different things, but the most prominent is this error:

TypeError: Cannot read property 'party' of undefined

This is what my *.html file looks like currently (was attempting some magic with async):

<ion-row *ngFor="let item1 of list1| async">
  <ion-col>{{item1.val}}</ion-col>
  <!--different attempts-->
  <ion-col>{{(list2|async)[item1.val].name}}</ion-col>
  <ion-col>{{(list2[item1.val].name| async)}}</ion-col>
  </ion-col>
</ion-row>

I'm thinking that ngFor is somehow changing the structure of list1 from:

Observable<any[]>

to an object that's more consumable. Without that, my list2 object is actually something that cannot be indexed unless some sort of transformation happens? Help :)

score 1 · Answer 1 · answered Nov 17 '17 at 20:15

So I was able to figure this out with some help from this post: Nested Observables in Angular2 using AngularFire2 not rendering in view

The trick was to make a map function which mapped an object observable to my second node:

this.list1= this.db.list("list1").snapshotChanges().map(changes => {
  return changes.map(list1Obj => ({
    l1Key: list1Obj.payload.key,
    list2Obj: this.db.object('list2/' + list1Obj.payload.key).valueChanges()
  }));
});

Then, I was able to display it in the html like so:

  <ion-row *ngFor="let item1 of list1| async">
    <ion-col>{{item1.l1Key}}</ion-col>
    <ion-col>{{((item1.list2Obj | async)?.name)}}</ion-col>
  </ion-row>

Using ngFor item as key in an Observable list

1 Answers1