ionic 6 - ngFor not showing data firebase realtime database

Question

I tried all ways to display data from the database (Firebase realtime database) There're following config rules:

{
  "rules": {
    ".read": "true",
    ".write": "true"
  }
}

Data is coming from the database (Firebase realtime database) however it doesn't display any records on the UI. When I print the console.log of data it comes correctly. Following are the code segments that I have used and I am completely new to the Ionic development so kindly point if I made any blunders.

home.page.html

    <ion-header [translucent]="true">
      <ion-toolbar>
        <ion-title>
          Blank
        </ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content [fullscreen]="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Blank</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-list>
        <ion-item *ngFor="let user of users">
          <ion-thumbnail slot="start">
            <img [src]="user.avatar">
          </ion-thumbnail>
          <ion-label>
         {{ user.first_name}}
          </ion-label>
        </ion-item>
      </ion-list>
    </ion-content>

home.page.ts

    import { HttpClient } from '@angular/common/http';
    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage {
    
      users:any[]=[];
    
      constructor(private http: HttpClient) {}
    
      ngOnInit(){ 
    
          this.http.get("https://food-ea070-default-rtdb.firebaseio.com/users.json").subscribe(data=>{
             this.users = JSON.parse(JSON.stringify(data));
             console.log("Data", data);
            });
          }
        }

Data is coming correctly from the database in console.log.

{"0":
  {"avatar":"https://firebasestorage.googleapis.com/v0/b/food-ea070.appspot.com/o/polloalabrasa.jpg?alt=media&token=5b226d30-2eb2-417d-9c94-c1b25e9890fa","email":"[email protected]","first_name":"Michael","id":7,"last_name":"Lawson"},
"-MUsoe5L3d3F1-E-nmC_":
  {"avatar":"https://reqres.in/img/faces/1-image.jpg","email":"[email protected]","first_name":"George","id":1,"last_name":"Bluth"},
"-MUsoqU00M9v0QR772aK":
  {"avatar":"https://reqres.in/img/faces/2-image.jpg","email":"[email protected]","first_name":"Janet","id":2,"last_name":"Weaver"},
"-MUsotIie6a5cU62E_UK":
  {"avatar":"https://reqres.in/img/faces/3-image.jpg","email":"[email protected]","first_name":"Emma","id":3,"last_name":"Wong"},
"-MUsp1tWC4ABqPvDLgs9":
  {"avatar":"https://reqres.in/img/faces/5-image.jpg","email":"[email protected]","first_name":"Charles","id":5,"last_name":"Morris"},
"-MUsp4Qm0Cyd9sfgcZ7m":
  {"avatar":"https://reqres.in/img/faces/6-image.jpg","email":"[email protected]","first_name":"Tracey","id":6,"last_name":"Ramos"}
}

Answer 1

Your "data" is an object of JSON, but not an array.

{
  "0": {
    "avatar": "https://firebasestorage.googleapis.com/v0/b/food-ea070.appspot.com/o/polloalabrasa.jpg?alt=media&token=5b226d30-2eb2-417d-9c94-c1b25e9890fa",
    "email": "[email protected]",
    "first_name": "Michael",
    "id": 7,
    "last_name": "Lawson"
  },
  ...
}

In your template, users is treated as an array.

<ion-item *ngFor="let user of users">

So you have to convert data object to an array first

let users = Object.values(data);