Блог

Я получаю эту ошибку, когда хочу отобразить вложенные коллекции firebase в HTML. Он отображается в консоли, но не в пользовательском интерфейсе.

Я получаю эту ошибку. Образ консоли

Файл 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) =gt; {  this.userId = user.userId;  });  }   fetchBookings() {  this.afs  .collection('user')  .doc(this.userId)  .collection('BookingHistory')  .get()  .subscribe((querySnapshot) =gt; {  querySnapshot.forEach((doc) =gt; {  console.log(doc.id, ' =gt; ', doc.data());  this.storedData = querySnapshot;  });  });  } }  

HTML-файл

 lt;ion-item *ngFor="let data of storedData"gt;  lt;ion-labelgt;{{data.TimeSlot}}lt;/ion-labelgt;  lt;ion-labelgt;{{data.BookedAt}}lt;/ion-labelgt;  lt;ion-labelgt;{{data.BookingDate}}lt;/ion-labelgt; lt;/ion-itemgt;  

Я бы попробовал что-нибудь вроде этого,

До тех пор, пока querySnapshot возвращает массив хранимых данных без каких-либо вложенных объектов, вы можете задать его напрямую, если вам не нужно прочитать его через правильную запись в структуре ответа и соответственно прочитать значения из списка в вашем HTML-шаблоне

 fetchBookings() {  this.afs  .collection('user')  .doc(this.userId)  .collection('BookingHistory')  .get()  .subscribe((querySnapshot) =gt; {  querySnapshot.forEach((doc) =gt; { // or you can remove this forEach() and set the querySnapshot (if it returns an array of storedData) directly   console.log(doc.id, ' =gt; ', doc.data());  this.storedData.push(doc);  });  });  } }