[英]Error: '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. - Ionic Project
I am trying to fetch my user's username from Firebase Firestore Database using Ionic and AngularFire.我正在尝试使用 Ionic 和 AngularFire 从 Firebase Firestore 数据库中获取用户的用户名。 I am using the
valueChanges()
method to get the observable, then trying to interpret the observable with an async pipe.我正在使用
valueChanges()
方法来获取 observable,然后尝试使用异步 pipe 来解释 observable。 However, when I run the code, I get the following error:但是,当我运行代码时,出现以下错误:
However, when I log the observable, it appears as shown:但是,当我记录 observable 时,它显示如下:
profile.page.ts: profile.page.ts:
import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { Router } from '@angular/router';
import { UserService } from '../user.service'
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore'
import { Observable } from 'rxjs';
@Component({
selector: 'app-profile',
templateUrl: './profile.page.html',
styleUrls: ['./profile.page.scss'],
})
export class ProfilePage implements OnInit {
constructor(public afAuth: AngularFireAuth, public router: Router, public user: UserService, public db: AngularFirestore) {
}
ngOnInit() {
}
logout() { this.afAuth.auth.signOut(); this.router.navigate(['/login']);}
}
profile.page.html: profile.page.html:
<ion-content>
<ion-grid>
<ion-row justify-content-center align-items-center style="height: 50%">
<ion-button color="danger" size="small" shape="round" (click)="logout()">Logout</ion-button>
<p *ngFor="let users of (username | async)">{{ users.username }}</p>
</ion-row>
</ion-grid>
</ion-content>
Thanks in advance for any help.提前感谢您的帮助。
You have that error because your username data is not an array so I would suggest you change your code like this.你有这个错误,因为你的用户名数据不是一个数组,所以我建议你像这样更改你的代码。 Make your username become an array then push it into array
使您的用户名成为一个数组,然后将其推入数组
username: string[] = [];
this.username = this.username.push(users.valueChanges());
Hi are you sure that users
is an array?嗨,你确定
users
是一个数组吗?
Maybe a simple console.log(users) can give a better look of the data type you are receiving.也许一个简单的 console.log(users) 可以更好地了解您收到的数据类型。
You should try to push/unshift to an array the mapped results from your service with a for of and return the array something like this for example:您应该尝试使用 for of 将服务中的映射结果推送/取消转移到一个数组,并返回类似这样的数组,例如:
private itemsCollection: AngularFirestoreCollection<User>
this.itemsCollection = this.afs.collection<User>('user', ref => ref.orderBy('name','desc').limit(5));
return this.itemsCollection.valueChanges().pipe(map( (users: User[]) =>{
let users = [];
for (const user of users) {
this.users.unshift(user);
}
return users
}))
afs is type AngularFirestore afs 是 AngularFirestore 类型
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.