我试图将Firebase中的嵌套数据显示给Ionic项目 . 我在firebase中有以下数据结构:
我的查询:
let dbRefLists = firebase.database().ref('lists/');
var self = this;
dbRefLists.on('value', (querySnapshot) => {
this.lists = Object.keys(querySnapshot.val()).map(key => querySnapshot.val()[key]);
querySnapshot.forEach((data) => {
var listItem = data.val().id;
dbRefLists.child(`${listItem}/listItems`).on('value', (snapshotVal) => {
if (snapshotVal.val() !== null) {
self.lists.listItems = Object.keys(snapshotVal.val()).map(key => snapshotVal.val()[key]);
}
})
return self.lists.listItems;
})
return lists;
});
我的HTML:
<ul>
<li *ngFor="let list of lists; let i=index" text-wrap (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}">
<h2>
<span>{{list.title}}</span>
</h2>
<ul *ngIf="isGroupShown(i)">
<li *ngFor="let listItem of lists.listItems">
<span>{{listItem.title}}</span>
</li>
</ul>
</li>
</ul>
结果是我收到了所有列表(List1和List2)中的列表项,而不是仅在List1中:
我的错误在哪里?谢谢
1 回答
如果您像这样展平数据库结构:
排队将变得更加容易 . 首先让我创建类,它们将位于Firebase服务文件中,如下所示:
获取数据:
这将为您提供(console.log数据):
最后你可以用HTML显示它:
结果如下:
如果您对代码有任何意见或者您有任何疑问,请告诉我 .
附:你可以在这里阅读关于平铺数据库new docs和这里old docs