Firebaseデータベースのネストされた配列

Question

angulafire2と一緒にFirebaseデータベースに保存されたデータをAngularアプリで使用しようとしています。ネストされた配列に問題があります。私はitems配列を取得するためにFirebaseListObservableを使用してい

items{ 
    item1{ 
     name: item1, 
     subitems{ 
      subitem1{ 
       name: subitem1 
      }, 
      subitem2{ 
       name: subitem2 
      } 
     } 
    } 
} 

：

私はこのようになります構造を有しています。

items: FirebaseListObservable<any>; 
[...] 
this.items = this.af.database.list('/items'); 

データを表示しようとすると問題が発生します。

<div *ngFor="let item of items | async"> 
    <span>{{(item)?.name}}</span> 

    <div *ngFor="let subitem of (item)?.subitems"> 
     <span>{{(subitem)?.name}}</span> 
    </div> 

</div> 

item.subitemsが配列として認識されないため、エラーが発生します。

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

---

EDIT： Iは、上記の例のようにFirebaseのテストデータベースを使用plunkerしました。 HERE

Answer 1

私は火災基地ではなく同じ問題を抱えていますが、この場合は問題ありません。これをexcutingとき

items: FirebaseListObservable<any>; 
[...] 
this.items = this.af.database.list('/items'); 
this.items.forEach(record => { 
    console.Debug(record); // show output 
    record.subitems.forEach(subRecord => { 
    console.Debug(subRecord); // show output too 
    }); 
}); 

、あなたはコンソールログは権利を取得しますか？ 私の場合、私はそうしており、私は同じ構成を見ています。 解決された場合に備えて、この問題を見ています。

Answer 2

私の場合は解決しました。

<div *ngFor="let item of items"> 
    {{item.prop}} 
    <table> 
     <tr *ngFor="let subitem of item.subItems"> 
     <td>{{subitem.prop}}</td> 
     </tr> 
    </table> 
    </div> 

いくつかのプロパティ名を変更した後に、これを最初に試してみてください。 その後、自分の要素の要素を置き換えて、変更のたびにテストして、まだ動作しているかどうかを確認します。

Answer 3

ファイアベースの構造は、通常、深くネストされないようにする必要があります。あなたの構造が深ければ深いほど、それらはより複雑になります。

しかし、あなたは構造上にマッピングし、Object.keys(obj)または実験Object.value(obj)のようなものを使用してオブジェクトを配列に変換したり、レベル

のキーを変換するために、例えば、さらなる上

以下のあなた自身の関数を書くことができますあなたはまた、ngForループ内の関数を使用してfound in this stack question

<li *ngFor="let o of obj"> 
    <p *ngFor="let item of generateArray(o)">{{item.key}}: {{item.value}} </p> 
</li> 

をこのような何かを行うことができます

this.items = db.list('/items').map(items => { 
    return items.map(item => { 
    return { 
     item: Object.keys(item.subitem) 
    } 
    }); 
}); 

この機能を使用して10

generateArray(obj){ 
    return Object.keys(obj).map((key)=>{ return {key:key, value:obj[key]}}); 
} 

あなたのキーと