我是 Angular 和 Ionic 的新手，所以，很抱歉提出問題。
我在 firebase 中有子集合，我可以在控制臺中檢索和顯示。 控制臺影像
但我想用 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>
uj5u.com熱心網友回復：
首先，您需要存盤資料而不是 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/352508.html
標籤：javascript 有角的 火力基地 离子框架 谷歌云firestore