我有一个简单的数据库是这样的:
{
"groups": {
"123": {
"name": "developers",
"users": {
"1": true
},
"users_count": 1
}
},
"events": {
"456": {
"name": "Developers conference",
"users": {
"1": true
},
"users_count": 1
}
},
"users": {
"1": {
"name": "Jon",
"groups": {
"123": true
},
"events": {
"456": true
}
}
}
}
在用户的主页,我要显示所有有关团体和活动,如他们的名字的信息。所以,在Homepage
类,我这样做:
获取用户的信息后,我检查是否有一组或事件。如果是这样,我得到每一个的key
,subscribe()
使用key
组或事件并且它被加载后的数据添加到阵列。
export class HomePage {
user: FirebaseObjectObservable<any>;
groupsKey: Array<any>;
groups: Array<any> = [];
eventsKey: Array<any>;
events: Array<any> = [];
constructor(private _auth: AuthService, public afDB: AngularFireDatabase) {
this.user = this.afDB.object(`/users/${this._auth.uid}`);
this.user.subscribe(user =>{
if(user.groups){
this.groupsKey = Object.keys(user.groups);
this.groupsKey.forEach(key => {
let groupObservable = this.afDB.object(`/groups/${key}`);
groupObservable.subscribe(group => {
this.groups.push(group);
})
})
}
if(user.events){
this.eventsKey = Object.keys(user.events);
this.eventsKey.forEach(key => {
let eventObservable = this.afDB.object(`/events/${key}`);
eventObservable.subscribe(event => {
this.events.push(event);
})
})
}
})
}
}
在HTML部分:
<div *ngFor="let item of groups">
{{item.name}}: {{item.users_count}} users
</div>
这种方法适用一见钟情,但是当一些更新的一组或事件制成,重复推数组中,当重新加载页面会恢复正常。
什么都可以在这种情况下更好地执行?我知道我应该删除阵列和使用async
管,但无法弄清楚如何做到这一点。
如果有人这样的回答同样的问题我偶然发现,这里是我的解决方案:
我摆脱静态数组和只使用Observables
及其经营。
export class HomePage {
user: FirebaseObjectObservable<any>;
groups: Observable<Array<{}>>;
events: Observable<Array<{}>>;
constructor(private _auth: AuthService, public afDB: AngularFireDatabase) {
this.user = this.afDB.object(`/users/${this._auth.uid}`);
this.user.subscribe(user =>{
if(user.groups){
this.groups = Observable.of(user.groups)
.map(obj => {
let arr = [];
Object.keys(obj).forEach((key) =>{
//get an Observable containing the info for each key in user.groups object.
arr.push(this.afDB.object(`groups/${key}`));
})
//zip() all Observables in the array
let zip = Observable.zip(...arr);
//return the emitted values (will return an Observable)
return zip;
})
//use switchMap() to flatten the Observables
.switchMap(val => val)
}
if(user.events){
this.events = Observable.of(user.events)
.map(obj => {
let arr = [];
Object.keys(obj).forEach((key) =>{
arr.push(this.afDB.object(`events/${key}`));
})
let zip = Observable.zip(...arr);
return zip;
})
.switchMap(val => val)
}
})
}
}
关于
我知道我应该删除阵列和使用异步管,但无法弄清楚如何做到这一点。
这就是我如何做到这一点时,我希望页面侦听来自DB的变化。我用Arrays
像你一样 - 当我其实并不需要观察,短短的事情列表...
.ts
-----
groupsObservable : Observable<any[]>;
eventsObservable : Observable<any[]>;
loadGroups() {
this.groupsObservable = this.afDB.list("groups/").valueChanges();
}
loadEvents() {
this.eventsObservable = this.afDB.list("events/").valueChanges();
}
.html
------
<div *ngFor="let g of groupsObservable | async">
{{ g.name }}
</div>
<div *ngFor="let e of eventsObservable | async">
{{ e.name }}
</div>