Question

我对Angular非常陌生，到目前为止它对它有多强大感到非常兴奋。我正在使用angularfire2库从firebase（* .ts）中检索两个单独的列表：

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文件当前的样子（正在尝试异步的魔法）：

<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的结构：

Observable<any[]>

到更易消耗的物体。没有它，我的list2对象实际上是一些无法索引的东西，除非发生某种转换？帮助：）

Answer 1

所以我能够通过这篇文章的一些帮助来解决这个问题：Nested Observables in Angular2 using AngularFire2 not rendering in view

诀窍是制作一个map函数，将一个可观察的对象映射到我的第二个节点：

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一样在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>

使用ngFor项作为Observable列表中的键

1 个答案: