ObservableリストのキーとしてngForアイテムを使用する

Question

私はAngularに対して非常に新しく、これまでのところどのように強力であるのか本当に興奮しています。 私はfirebase（* .TS）から2つの別々のリストを取得するためにangularfire2ライブラリを使用しています：

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

* ngForとの最初のリストをループしながら、私は取得でキーとしてlist1.val使用したいです異なるものをしようとしたときLIST2値

(list2[list1.val].name). 

は、私は別のエラーのロットに実行されますが、最も顕著なのは、このエラーです：

TypeError: Cannot read property 'party' of undefined 

これは何私の* .htmlのですファイルは、現在、（非同期でいくつかの魔法をしようとしていた）のようになります。より多くの消耗品のオブジェクトに

Observable<any[]> 

：

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

私はngForは何とかからLIST1の構造を変更していることを考えています。それがなければ、私のlist2オブジェクトは、何らかの変換が起こらない限り、実際には索引付けできないものですか？ヘルプ:)

Answer 1

だから私はこの記事からいくつかの助けを借りてこれを理解することができた：Nested Observables in Angular2 using AngularFire2 not rendering in view

トリックは私の2番目のノードに観測可能なオブジェクトをマップし、マップ機能を作ることだった。

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

次に、私はhtmlでそれを次のように表示できました：

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