如何通過Angular中的數組迭代FirebaseObjectObservable屬性？

我希望能夠在我的Firebase數據庫中對groups對象的users屬性運行*ngFor。如何通過Angular中的數組迭代FirebaseObjectObservable屬性？

到目前爲止，我想這樣的：

<h5>{{ (group$ | async)?.name }}</h5> 
<div class="gd-users-container"> 
    <span *ngFor="let user of (group$ | async)?.users">{{ user.email }}</span> 
</div>

凡group$ = getGroup(): FirebaseObjectObservable<any>;

而且數據的結構是這樣的：

"groups": { 
    "marketing": { 
    "apps": { 
     "someid": { 
     "id": "someid", 
     "name": "Payroll" 
     } 
    }, 
    "id": "marketing", 
    "name": "Marketing", 
    "users": { 
    "23948n": { 
     "id": "23948n", 
     "email": "[email protected]" 
     }, 
    "asdfasdfasdf": { 
     "id": "asdfasdfasdf", 
     "email": "[email protected]" 
     } 
    } 
    } 
}

當我嘗試上面的標記，我得到該組的名稱，但我得到一個錯誤，當涉及到*ngFor：

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

它對我來說意義重大，我爲什麼會收到該錯誤，因爲group對象上的屬性users不是數組，而是對象。我的問題是如何得到它，以便users屬性可以被視爲一個數組。

來源

2017-09-11 Joshua Kemmerer

在這種情況下，您不需要異步管道。由於錯誤狀態，*ngFor只能綁定到iterables，但什麼async pipe does is：

異步管道訂閱到可觀察或承諾，返回時，就已經發出

所以你的最新值不要迭代。相反，使用：

*ngFor="let email of emails"

編輯：不，它不會將其轉換爲數組。如上所述，它需要一個迭代，所以你需要自己做，用，說：

let emails: []; 
Object.keys(group$?.users).map(key => emails.push(group$?.users[key].email)))

添加附加屬性，或整個用戶對象，到陣列，如你所願。對於exaxmple，在ES7的Object.values()：

let users = Object.values(group$.users)

而且從約書亞原<div *ngFor = "let user of users">{{user?.email}}</div>

來源

2017-09-11 13:42:04 msanford

好的，這樣可以擺脫錯誤，但它仍然不會將該屬性轉換爲數組以遍歷其對象。我怎樣才能做到這一點？ –

@JoshuaKemmerer查看編輯：Angular不會破壞你的數據結構，你需要自己修改它。 – msanford

@JoshuaKemmerer我很感謝你接受我的答案，但隨時發佈一個新的答案與您的編輯內容。這是完全可以接受的。我將離開編輯直到你做，然後拒絕它（它屬於一個新的答案）。 :) – msanford

響應：

所以，我落得這樣做預訂至group對象，並創建了一個單獨users$型號，分配到group.users：

this.group$ = this.route.paramMap 
    .switchMap((params: ParamMap) => 
    this.gs.getObjectObservable(params.get('id'))); 

this.group$.subscribe(snapshot => { 
    this.users$ = Object.values(snapshot.users); 
});

然後，我只是顯示的數據爲：

<div *ngFor="let user of users$"> 
    {{ user.email }} 
</div>

不知道這是做的最好的方式，但它似乎最容易的。另外，根據我對訂閱和「快照」的理解，這應該很好。

來源

2017-09-11 15:55:02 msanford

如何通過Angular中的數組迭代FirebaseObjectObservable屬性？

回答

相關問題