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

【问题标题】：Ionic5/Angular - Error trying to diff '[object Object]'. Only arrays and iterables are allowedIonic5/Angular - 尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象
【发布时间】：2021-12-21 00:56:40
【问题描述】：

当我想在 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>

【问题讨论】：

标签： html angular firebase ionic-framework

【解决方案1】：

我会尝试这样的，

只要querySnapshot返回的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);
        });
      });
  }
}

【讨论】：