As a newcomer to Angular and Firebase, I apologize if my question seems basic.
I'm seeking guidance on how to display related object information from one object in angularfire2. Specifically, I want to show the role names assigned to a user.
Here is an example of the structure in the Firebase database:
role: {
roleKey1: {
name: Designer
...
},
roleKey2: {
name: Manager
...
}
},
user: {
userKey1: {
name: Bill,
roles: {
roleKey1: true,
roleKey2: true,
},
...
},
userKey2: {
name: Steve,
roles: {
roleKey1: true,
},
...
},
}
In my controller implementation:
export class UserComponent implements OnInit {
public user: Observable<any>;
public id: string;
constructor(private af: AngularFire, private activatedRoute: ActivatedRoute) {
}
public ngOnInit() {
const id = this.activatedRoute.params.subscribe(params => {
if (params['id']) {
this.id = params['id'];
console.log(params['id']);
}
});
this.user = this.af.database.object('/user/' + this.id)
.switchMap((user) => {
const roleKeys = Object.keys(user.roles);
return Observable.forkJoin(
roleKeys.map((roleKey) => this.af.database.object('/role/' + roleKey)
.first()
),
(...roles) => {
roleKeys.forEach((roleKey, index) => {
user.roles[roleKey] = roles[index];
});
return user;
}
);
});
}
In my template design:
<h2>Name: {{ (user | async)?.name }} roles</h2>
<ul *ngFor="let role of user.roles | async">
<li>{{ role.name }}</li>
</ul>
Current output: Only the user's name is visible, no roles are displayed.
Desired Outcome:
with url:
- Bill's roles:
- Manager
- Designer
- Bill's roles:
with url:
- Steve's roles:
- Designer
- Steve's roles:
Your assistance is greatly appreciated!