How to display firebase subcollections in ionic hmtl?-CodePudding

I'm new to Angular and Ionic, so, sorry for question.

I have subcollection in firebase, and I could retrieve and display in console. console image

But I want to display it in HTML.

typescript page

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;

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

HTML page

<ion-content>
    <ion-button (click)="fetchBookings()"></ion-button>
   
    <ion-item *ngFor="What I need to write here?">
        
      <ion-label>{{"What I need to write here?"}}</ion-label>
      
    </ion-item>
</ion-content>

CodePudding user response：

First you'll need to store the data instead of the console.log() and you extract the data with the ngFor method.

<ion-content>
<ion-button (click)="fetchBookings()"></ion-button>

<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>
</ion-content>