抱歉提問。我是 Angular 和 Ionic 的新手。并且在檔案中找不到合適的解決方案。
當我想在 HTML 中顯示 firebase 子集合時出現此錯誤。它確實顯示在控制臺中，但不在 UI 中。
我收到這個錯誤。控制臺影像
TS檔案
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檔案
<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>
uj5u.com熱心網友回復：
我會嘗試這樣的事情，
只要 querySnapshot 回傳沒有任何嵌套物件的存盤資料陣列，您就可以直接設定它，如果不是，您必須通過回應結構中的正確條目讀取它，并在 HTML 模板中相應地從串列中讀取值
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);
});
});
}
}
uj5u.com熱心網友回復：
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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/352506.html