[英]Ionic5/Angular - Error trying to diff '[object Object]'. Only arrays and iterables are allowed
sorry for question.抱歉提问。 I'm new to Angular and Ionic.我是 Angular 和 Ionic 的新手。 And couldn't find proper solution in documentations.并且在文档中找不到合适的解决方案。
I'm getting this error when I want to display firebase subcollections in HTML.当我想在 HTML 中显示 firebase 子集合时出现此错误。 It does display in console but not in UI.它确实显示在控制台中,但不在 UI 中。
I'm getting this error.我收到这个错误。 Console image控制台图像
TS file 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 file 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>
I'd try something like this,我会尝试这样的事情,
As long as the querySnapshot returns array of storedData without any nested objects, you can set it directly if not you have to read it through the correct entry from the response structure and read the values from the list accordingly in your HTML template只要 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);
});
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.