angularfire2 5.0.0-rc.2からネストされたデータリストを取得

Question

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

そして、これは私が

<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の形になっ値を返したサービス方法で知っているHTMLページです。私が欲しいのは、の中のキーを反復して、の@ g内のデータをリストとしてHTMLページに表示する方法を知ることです。私もマップ演算子を使って試してみましたが、私はangularfire2 5.0.0-rc.2でより良いソリューションを見つけることができませんでした。

Answer 1

私は

がリスト
https://github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md

としてデータを取得AngularFireList https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.mdに

をFirebaseListObservableを更新して、これは私が行っている方法です同じ問題を持っている誰のためにこれらのリンクが役に立ったと評価していそれ

これは私のサービスです

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ファイルでは、この1よりも良いと簡単な答えがあるでしょうがある可能性があります。

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

のように見えます。しかし、これが問題をどのように解決するかです。