Verwenden von ngFor Element als Schlüssel in einer Observable-Liste

Question

Ich bin sehr neu in Angular und wirklich aufgeregt, wie stark es ist. ich die angularfire2 Bibliothek abgerufen werden zwei separate Listen von Feuerbasis (* .ts):

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

Während mit * ngFor über die erste Liste Looping, möchte ich als Schlüssel verwenden list1.val bei der Beschaffung ein list2 Wert

(list2[list1.val].name). 

ich in viele verschiedenen Fehlern ausgeführt werden, wenn verschiedene Dinge versucht, aber die prominenteste ist dieser Fehler:

TypeError: Cannot read property 'party' of undefined 

Dies ist, was mein * .html Datei sieht aus wie zur Zeit (war etwas Magie mit Asynchron-Versuch):

<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> 

Ich denke, dass ngFor irgendwie verändert die Struktur von list1 aus:

Observable<any[]> 

zu einem Objekt, das mehr Verbrauch ist. Ohne dieses ist mein list2-Objekt tatsächlich etwas, das nicht indiziert werden kann, solange keine Art von Transformation stattfindet? Hilfe :)

Answer 1

So konnte ich das von diesem Posten mit etwas Hilfe, um herauszufinden: Nested Observables in Angular2 using AngularFire2 not rendering in view

Der Trick, um eine Map-Funktion zu machen war, die ein Objekt beobachten zu meinem zweiten Knoten zugeordnet:

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() 
    })); 
}); 

Dann konnte ich es in der HTML so anzeigen:

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