Trying to get values from cloud Firestore using keyvalue (Angular)

Question

My firebase database has a collection called users. I'm able to access it with the following code:

in my service:

  users$ = this.afs.collection<Users[]>('users').valueChanges();

in my component:

public users = this.firestoreService.users$.pipe(tap(console.log));

when I just do

{{users | async | json}}

, I get the object no problem. I'm having trouble iterating through the them using the keyvalue pipe. this is my code:

 <pre>{{users | async | json}}</pre> <table class="table"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> <th>Role</th> </tr> </thead> <tbody *ngIf="users"> <tr *ngFor="let user of users | async | keyvalue"> <td>{{user.value.displayName}} </td> </tr> </tbody> </table>

if I do user.key, I get the key in the array. can't reach the 'inner' keys or values. this is my user class:

 export interface Users { displayName: string; email: string; phoneNumber: null; role: string; }

Here's a picture of my database structure:

Answer 1

You are returning an Observable<Users[]> in users$. As such when using users interpolated with async pipe, you are already getting an array Users[] which is an iterable.

So change your HTML to:

<tr *ngFor="let user of users | async">
   <td>{{user.displayName}} </td>
</tr>