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>