AngularFire2嵌套* ngFor Array中的數組...但Firebase沒有數組... ...？

Question

我正在使用AngularFire2，嘗試從列表中獲取列表。 甲嵌套*有* ngFor內ngFor上不顯示視圖...

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