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

可能會有一個比這更好的和簡單的答案。但這是我如何解決這個問題。