![](/img/trans.png)
[英]Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.[Angular 8]
[英]Error: '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. - Ionic Project
我正在嘗試使用 Ionic 和 AngularFire 從 Firebase Firestore 數據庫中獲取用戶的用戶名。 我正在使用valueChanges()
方法來獲取 observable,然后嘗試使用異步 pipe 來解釋 observable。 但是,當我運行代碼時,出現以下錯誤:
但是,當我記錄 observable 時,它顯示如下:
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:
<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>
提前感謝您的幫助。
你有這個錯誤,因為你的用戶名數據不是一個數組,所以我建議你像這樣更改你的代碼。 使您的用戶名成為一個數組,然后將其推入數組
username: string[] = [];
this.username = this.username.push(users.valueChanges());
嗨,你確定users
是一個數組嗎?
也許一個簡單的 console.log(users) 可以更好地了解您收到的數據類型。
您應該嘗試使用 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 是 AngularFirestore 類型
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.