AngularFire2ネストされた* ngFor Array内の配列...しかしFirebaseは配列を持っていません...？

Question

私はAngularFire2を使ってリストからリストを取得しようとしています。 * ngFor内 *ネストされたngForはFirebase

のビューに...

app.componnent

... 
constructor(private _af: AngularFire) { 
    this.lists = this._af.database.list(this._API_URL); 
} 
... 

app.component.html

<div *ngFor="let list of lists | async"> 
    {{sublist.name}}<br/> <!-- I can see you --> 

    <!--******* I can't see you **********--> 
    <div *ngFor="let rootword of list.rootwords"> 
     {{rootword.word}} {{rootword.total}} 
    </div> 
</div> 

例を示していません

maindb 
    |_list1 
    | |_name: 'List 1" 
    | |_rootwords 
    |  |_apple 
    |  | |_word: 'apple' 
    |  | |_total: 4 
    |  | 
    |  |_banana 
    |  | |_word: 'banana' 
    |  | |_total: 2 
    |  |_carpet 
    |  | |_word: 'carpet' 
    |  | |_total: 21 
    | 
    |_list2 
    |_name: "List 2" 
    |_rootwords 
     |_elephant 
     | |_word: 'elephant' 
     | |_total: 4 
     |_sloth 
      |_word: 'sloth 
      |_total: 5 

ngForをngForにネストする方法は、firebase.listですか？ マップやフィルタリングは必要ですか？ AngularFire2は内部オブジェクトを配列に変換する方法がありますか？

すべての提案が高く評価されました。

Answer 1

あなたはこのように、map opereratorとArray.prototype.reduceを使用してアレイとrootwordsオブジェクトを置き換えることができます。

import 'rxjs/add/operator/map'; 

constructor(private _af: AngularFire) { 

    this.lists = this._af.database 
    .list(this._API_URL) 

    // Use map the map operator to replace each item in the list: 

    .map(list => list.map(item => ({ 

     // Map to a new item with all of the item's properties: 
     ...item, 

     // And replace the rootwords with an array: 
     rootwords: Object.keys(item.rootwords) 

     // Use reduce to build an array of values: 
     .reduce((acc, key) => [...acc, item.rootwords[key]], []) 
     }) 
    )); 
} 

または、スプレッド構文なしを：

import 'rxjs/add/operator/map'; 

constructor(private _af: AngularFire) { 

    this.lists = this._af.database 
    .list(this._API_URL) 
    .map(list => list.map(item => { 
     var copy = Object.assign({}, item); 
     copy.rootwords = Object.keys(item.rootwords).reduce((acc, key) => { 
      acc.push(item.rootwords[key]); 
      return acc; 
     }, []); 
     return copy; 
    })); 
}