Angular 角度4+；firebase，在对象中输出嵌套对象

我的火力基地：

 {
      "hotel" : {
        "-Kjgyamcup6ULm0Awa-1" : {
          "complete" : "true",
          "images" : {
            "-Kjgyb6A2gRiDhwaWx-V" : {
              "name" : "2.jpg",
              "url" : "https://firebasestorage.googleapis.com/v0/b/teplo-31a17.appspot.com/o/hotel%2F-Kjgyamcup6ULm0Awa-1%2Fimages%2F2.jpg?alt=media&token=0faffb92-9bc5-44ce-9189-ee405137c3bf"
            },
            "-KjgybAKrkf3EzYxvgGD" : {
              "name" : "4.jpg",
              "url" : "https://firebasestorage.googleapis.com/v0/b/teplo-31a17.appspot.com/o/hotel%2F-Kjgyamcup6ULm0Awa-1%2Fimages%2F4.jpg?alt=media&token=bd7ebc47-b14d-46e5-a58d-01d647fcf95d"
            }
          },
          "number" : "102",
          "price" : "2500"
        }, etc

如何输出图像？ 我在component.ts中的代码

 export class UserComponent implements OnInit {

 hotelNumbers: FirebaseListObservable<any[]>;

  constructor(private af: AngularFire) { 

    this.hotelNumbers = af.database.list('/hotel');

  }

  ngOnInit() {
  }


}

导出类UserComponent实现OnInit{
酒店编号：FirebaseListObservable；
构造函数（专用af:AngularFire）{
this.hotelNumbers=af.database.list（'/hotel'）；
}
恩戈尼尼特（）{
}
}

和html

<div *ngFor="let hotel of hotelNumbers | async">
  <p>{{hotel.number}}</p>
  etc
</div>

{{hotel.number}}

等

---

如何输出图像（*ngFor=“image of hotel.number.images | async”）-无工作（'/hotel'）

Firebase非常棒，因为它将一个可观察的对象与一个数组合并在一起。因此，您可以考虑<代码> AF数据库返回的可观察的。列表（“/酒店”）< /C> >数组，并在其上用一个异步管道执行NGOP:

<div *ngFor="let hotel of hotels | async">
  <p>{{hotel.images}}</p>
  etc
</div>

{{hotel.images}}

等

这是因为

hotel

是一个项目（JSON对象中的一个键），它具有

images

属性（price、complete等）

如果您想迭代所有酒店的图像，那么您的数据结构是错误的。您应该对其进行反规范化，并使数据结构扁平化。这里有一篇关于它的优秀文章，你一定要读！

---

如果您确实希望保留该数据结构，则不能直接使用异步管道迭代图像。您必须订阅酒店并通过回调获取图像嵌套对象。我认为您必须通过使用

Object.keys（json）.forEach（key=>json[key]…）迭代嵌套的json来创建一个数组然后使用ngFor指令中的数组…
可以解决以下问题：

通过建议rmekarni编辑我的数据库：


编辑component.ts文件

 constructor(private af: AngularFire) { 

    this.hotelNumbers = af.database.list('/hotel').map((myhotels) =>{
      return myhotels.map(myhotel =>{
        myhotel.img = af.database.list('/images/' + myhotel.$key);
        return myhotel;   
      });
    });

  }

编辑html文件

<div *ngFor="let myhotel of hotels | async">
  <p>{{myhotel.number}}</p>
  <div *ngFor="let img of myhotel.img | async">
      <img src="{{img.url}}">
  </div>
</div>


{{myhotel.number}

这不是全部JSON吗？我的意思是并没有什么可以像在模板中一样进行迭代。您能展示一下您得到的实际JSON吗？它应该是一个数组。