Ionic5/Angular - 尝试区分“[object Object]”时出错。只允许数组和可迭代对象

Question

当我想在 HTML 中显示 firebase 子集合时遇到此错误。它确实显示在控制台中，但不显示在 UI.

中

我遇到了这个错误。 Console image

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>

Answer 1

我会尝试这样的事情，

只要querySnapshot returns array of storedData 没有任何嵌套对象，你可以直接设置它如果没有你必须通过响应结构中的正确条目读取它并从列表中读取值因此在您的 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);
        });
      });
  }
}

Ionic5/Angular - 尝试区分“[object Object]”时出错。只允许数组和可迭代对象

Ionic5/Angular - Error trying to diff '[object Object]'. Only arrays and iterables are allowed

html

firebase

ionic-framework

angular