Angular4/AngularFire2のget（db.list）ネストされたJSONから

Question

私はこの内のレストランを得たヒントです：

ここでJSON構造：http://prntscr.com/gn5de8

だから私は、取得するために最初に試しますこのような私の繰り返しレストラン内のデータ：

<p *ngFor="let tip of restaurants[item.$key].tips" [innerHTML]="tip.description"></p> 

しかし、これはうまくいきません。

だから私はcomponent.tsに余分なGETをしよう：

public restaurants: FirebaseListObservable<any>; 
public tips: FirebaseListObservable<any>; 

constructor(private db: AngularFireDatabase) { 
    this.restaurants = db.list('/restaurants'); 
    this.tips = db.list(`/restaurants/${key}/tips`); 
} 

そして、それらを繰り返して、次にしようと試み：

<p *ngFor="let tip of tips | async" [innerHTML]="tip.description"></p> 

しかし、ここで私は2番目の行でエラーが出ますコンストラクタで "名前を見つけることができません"キー "私の構文で何が間違っていますか？そして、私がやろうとしているのは、これを解決する正しい方法でしょうか？

ここでhtmlとTSファイルあなたが見てする必要がある場合：

HTML：https://pastebin.com/6rEmmrXZ TS：私は私の2回目の試行のための情報を見つけるここhttps://pastebin.com/e5CnPqYp

ソース： Firebase/Angularfire2: nested data nodes in firebase

お待ちしております。

Answer 1

key変数をどこにも定義していないため、このエラーが発生しています。

this.restaurants = db.list('/restaurants') 
    .map(restaurants => restaurants.map(item => ({ 
    ...item, 
    tips: Object.keys(item.tips) 
     .reduce((acc, key) => [...acc, item.tips[key]], []); 
    }); 
)); 

はmapオペレータ（rxjs/add/operator/map）をインポートすることを忘れないでください：すべてのレストランを配列にtipsオブジェクトを変換し、その後、レストランのリストをマッピングしている何をしたい達成するための一つの方法。次に、HTML内でレストランリストを繰り返してください：

<div *ngFor="let restaurant of restaurants | async"> 
    <div *ngFor="let tip of restaurant.tips"> 
    <p [innerHTML]="tip.description"></p> 
    </div> 
</div> 

ただし、私はこのアプローチをお勧めしません。データ構造とデータベース呼び出しを再考するべきだと思います。

今やっていることは、レストランのリストと一緒にヒントのリスト全体を呼び出します。それはあまりにも高価になるでしょう。ヒントリストを分割する必要があります。

- tips 
    - $restaurantKey 
    - $tipKey 
     ...data 

こうして、ヒントリストを必要なときにのみ、別々に呼び出すことができます。また、私はレストランのリストに沿ってヒントのリスト全体を読み込むためのポイントが表示されません。あなたのアプリが成長し、あなたはすべてのレストランのためのいくつかのヒントを持ってしまう場合、それは大きな問題になる可能性があります。

代わりに、ヒントの要約だけを表示できます。レストランを選択すると、一度にすべてを読み込むのではなく、そのレストランのヒントのみを表示します。