如何在 ionic html 中显示 firebase 子集合？答案

【问题标题】：How to display firebase subcollections in ionic hmtl?如何在 ionic html 中显示 firebase 子集合？
【发布时间】：2021-12-20 20:20:20
【问题描述】：

我是 Angular 和 Ionic 的新手，所以，很抱歉提出问题。

我在 firebase 中有子集合，我可以在控制台中检索和显示。 console image

但我想用 HTML 显示它。

打字稿页面

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

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

【问题讨论】：

标签： javascript angular firebase ionic-framework google-cloud-firestore

【解决方案1】：

首先，您需要存储数据而不是 console.log()，然后使用 ngFor 方法提取数据。

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

【讨论】：