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

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">
  <tbody *ngIf="users">
  <tr *ngFor="let user of users | async | keyvalue">
     <td>{{user.value.displayName}} </td>

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:
enter image description here

44 thoughts on “Trying to get values from cloud Firestore using keyvalue (Angular)”

  1. Веб-площадка Joy casino начала деятельность на российском рынке в две тысячи
    четырнадцатом году. Пользователям сайта предлагается сертифицированный софт от известных компаний.
    В коллекцию азартных развлечений входят
    симуляторы барабанного типа, лайв-игры и пари на спорт и киберспортивные дисциплины.


Leave a Comment