Error: '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. - Ionic Project

Question

I am trying to fetch my user's username from Firebase Firestore Database using Ionic and AngularFire. I am using the valueChanges() method to get the observable, then trying to interpret the observable with an async pipe. However, when I run the code, I get the following error:

error

However, when I log the observable, it appears as shown:

observable

profile.page.ts:

import { Component, OnInit } from '@angular/core';

import { AngularFireAuth } from '@angular/fire/auth';
import { Router } from '@angular/router';

import { UserService } from '../user.service'

import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore'

import { Observable } from 'rxjs';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.page.html',
  styleUrls: ['./profile.page.scss'],
})

export class ProfilePage implements OnInit {





  constructor(public afAuth: AngularFireAuth, public router: Router, public user: UserService, public db: AngularFirestore) { 


  }



  ngOnInit() {



  }

  logout() { this.afAuth.auth.signOut(); this.router.navigate(['/login']);}


}

profile.page.html:

 <ion-content>
  <ion-grid>
      <ion-row justify-content-center align-items-center style="height: 50%">
    <ion-button color="danger" size="small" shape="round" (click)="logout()">Logout</ion-button>
    <p *ngFor="let users of (username | async)">{{ users.username }}</p>
    </ion-row>
    </ion-grid>
</ion-content>  

Thanks in advance for any help.

Answer 1

You have that error because your username data is not an array so I would suggest you change your code like this. Make your username become an array then push it into array

username: string[] = [];

this.username = this.username.push(users.valueChanges());

Answer 2

Hi are you sure that users is an array?

Maybe a simple console.log(users) can give a better look of the data type you are receiving.

Answer 3

You should try to push/unshift to an array the mapped results from your service with a for of and return the array something like this for example:

private itemsCollection: AngularFirestoreCollection<User>
     this.itemsCollection = this.afs.collection<User>('user', ref => ref.orderBy('name','desc').limit(5));
        return this.itemsCollection.valueChanges().pipe(map( (users: User[]) =>{
                  let users = [];
                  for (const user of users) {
                    this.users.unshift(user);

                  }
                     return users          
                }))

afs is type AngularFirestore