sorry for question. I'm new to Angular and Ionic. And couldn't find proper solution in documentations.

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>

CodePudding user response：

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);
        });
      });
  }
}

CodePudding user response：

TS File

fetchBookings() {
        this.afs
          .collection('user')
          .doc(this.userId)
          .collection('BookingHistory')
          .get()
          .subscribe((querySnapshot) => {    
    this.storedData = querySnapshot.docs.map(e => {
                return {
                  id: e.data().id,
                  timeSlot: e.data()['TimeSlot'],
                  bookedAt: e.data()['BookedAt'],
                  bookingDate: e.data()['BookingDate'],
                };
              });
    });

Html Page

<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>