Just starting out with Angular and I'm really impressed with its power so far. I'm using the angularfire2 library to fetch two separate lists from firebase (*.ts):
this.list1= this.db.list("list1").valueChanges();
this.list2= this.db.list("list2").valueChanges();
As I iterate through the first list with *ngFor, I want to use list1.val as a key to access a value from list2
(list2[list1.val].name).
I've encountered various errors while experimenting with different approaches, but the most recurring one is:
TypeError: Cannot read property 'party' of undefined
This is how my *.html file looks right now (trying some async magic):
<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 suspect that ngFor may be altering the structure of list1 from:
Observable<any[]>
to an object that's easier to work with. Without that, it seems like my list2 object cannot be accessed without some kind of transformation. Any help would be appreciated :)