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

Question

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

这是我从火力地堡

对象名单这是从服务的方法，用于检索有关的所有餐厅的数据

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

这是我要显示我的数据

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

HTML页中，我知道在服务方法我没有做什么，只是返回的值越来越形式火力地堡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> 

可能会有一个比这更好的和简单的答案。但这是我如何解决这个问题。