从angularfire2 5.0.0-rc.2中检索嵌套数据列表

Question

我想使用angularfire2 5.0.0-rc.2显示从Firebase到Ionic视图的对象列表。

这是Firebase中的对象列表

这是来自服务的方法，用于检索与餐馆相关的所有数据

getRestaurants() {
    this.restaurants = this.af.list('/Restaurants')
    return this.restaurants;
}

这是我接受来自服务的数据的组件

 export class RestaurantsPage {

  restaurants: Observable<any[]>;
  constructor(public navCtrl: NavController, public af: AngularFireDatabase, public dataservice: handleDataService) {
    this.dataservice.getUserEmail().subscribe(res => {
      this.restaurants = this.dataservice.getRestaurants().valueChanges();
    })
    // this.items.subscribe(res => console.log(res[0].$key));
 }

这是我要显示数据的HTML页面

<ion-content class="card-background-page">
  <ion-list>
    <ion-item *ngFor="let restaurant of restaurants | async">
      <ion-thumbnail item-start>
        <img src="img/thumbnail-totoro.png">
      </ion-thumbnail>
      <h2>{{restaurant.Name}}</h2>
      <h3>{{restaurant.Description}}</h3>
      <button ion-button clear item-end (click)="gotoPage(restaurant)">View</button>
    </ion-item>
  </ion-list>
</ion-content>

我知道在服务方法中我什么也没做，只是返回了从Firebase API获得的价值。 我想要知道如何迭代s @ g，com中的键，并将我的HTML页面中每个键内的数据显示为列表。 我也尝试使用map运算符，但我在angularfire2 5.0.0-rc.2中找不到更好的解决方案。

Answer 1

我发现这些链接对任何遇到相同问题的人都有帮助

将FirebaseListObservable更新为AngularFireList https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md

以列表形式检索数据
https://github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md

这就是我做到这一点的方式

这是我的服务

    getRestaurants() {
    let restaurants = this.af.list('/Restaurants');
    return restaurants;
}

getResturantsFromKeys(key){
    let rest = this.af.list('/Restaurants/'+ key);
    return rest;
}

这是我的组成部分

  restaurants: any[] = [];
  allRestaurants: Observable<any[]>
  constructor(public navCtrl: NavController, public af: AngularFireDatabase, public dataservice: handleDataService) {
    this.dataservice.getUserEmail().subscribe(res => {
      this.dataservice.getRestaurants().snapshotChanges().subscribe(actions => {
        actions.forEach(action => {
          // console.log(action.payload.val());
          this.allRestaurants = this.dataservice.getResturantsFromKeys(action.key).valueChanges();
          this.allRestaurants.subscribe(res => {
            res.forEach(element => {
              this.restaurants.push(element);
            });
          });
        });
      });
    });
  }

HTML文件看起来像这样

 <ion-item *ngFor="let restaurant of restaurants">
  <h2>{{restaurant.Name}}</h2>
  <h3>{{restaurant.Description}}</h3>
  <button ion-button clear item-end (click)="gotoPage(restaurant)">View</button>
</ion-item>

可能会有一个比这个更好，更简单的答案。 但这就是我解决问题的方法。