Angularfire show key and value

Question

In my angular project, I am using angularfirebase as below to save user displayname:

this.afDB.object('/users/' + this.userId).set({displayName: user.displayname })

Which gives something like this...

Then in order to display it, I am doing the following:

this.profileData = this.db.list(`/users/${this.userId}/`);   

Then, in HTML:

<p> {{(profileData | async)?. displayName}} </p> <!-- Doesn't show any -->

However, it doesn't show any data.

If I try below, then it does show the user name:

<div class="text" *ngFor="let item of profileData| async">
     {{item.$value}} <!-- Shows the display name -->
</div> 

What am I doing wrong? Since there is only one key, I don't need *ngFor and I am baffled. Any help will be much appreciated.

Thanks!

EDIT:

I am simply trying to show the logged-in user display name by using this.userId. In this example, let say the logged-in user has id of "se5Zmy8n..." (the last one in the img). Then the displayName would be "asesdf4r".

Answer 1

You're access a leaf node. You need to go one level up to access all users

this.profileData = this.db.list('/users/');  

List will give you an object with keys that are your user keys.