Ionic5/Angular - Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Issue

I'm getting this error when I want to display firebase subcollections in HTML. It does display in console but not in UI.

I'm getting this error. Console image

TS file

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';
import { AngularFirestore } from '@angular/fire/compat/firestore';

@Component({
  selector: 'app-my-reservations',
  templateUrl: './my-reservations.page.html',
  styleUrls: ['./my-reservations.page.scss'],
})
export class MyReservationsPage implements OnInit {
  user: any;
  userId: string;
  storedData: any = [];
  constructor(
    private auth: AuthService,
    private router: Router,
    private afs: AngularFirestore
  ) {}

  ngOnInit() {
    this.auth.user$.subscribe((user) => {
      this.userId = user.userId;
    });
  }

  fetchBookings() {
    this.afs
      .collection('user')
      .doc(this.userId)
      .collection('BookingHistory')
      .get()
      .subscribe((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          console.log(doc.id, ' => ', doc.data());
          this.storedData = querySnapshot;
        });
      });
  }
}

HTML file

<ion-item *ngFor="let data of storedData">
    <ion-label>{{data.TimeSlot}}</ion-label>
    <ion-label>{{data.BookedAt}}</ion-label>
    <ion-label>{{data.BookingDate}}</ion-label>
</ion-item>

Solution

I'd try something like this,

As long as the querySnapshot returns array of storedData without any nested objects, you can set it directly if not you have to read it through the correct entry from the response structure and read the values from the list accordingly in your HTML template

fetchBookings() {
    this.afs
      .collection('user')
      .doc(this.userId)
      .collection('BookingHistory')
      .get()
      .subscribe((querySnapshot) => {
        querySnapshot.forEach((doc) => { // or you can remove this forEach() and set the querySnapshot (if it returns an array of storedData) directly 
          console.log(doc.id, ' => ', doc.data());
          this.storedData.push(doc);
        });
      });
  }
}

Answered By - Ramana