时间戳

首页 > 解决方案 > 错误：“对象”类型的“[对象对象]”。NgFor 仅支持绑定到 Iterables，例如 Arrays。- 离子项目

javascript - 错误：“对象”类型的“[对象对象]”。NgFor 仅支持绑定到 Iterables，例如 Arrays。- 离子项目

问题描述

我正在尝试使用 Ionic 和 AngularFire 从 Firebase Firestore 数据库中获取我的用户名。我正在使用该valueChanges()方法获取可观察对象，然后尝试使用异步管道解释可观察对象。但是，当我运行代码时，出现以下错误：

错误

但是，当我记录 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>

提前感谢您的帮助。

标签： javascriptangulartypescriptionic-frameworksingle-page-application

解决方案

你有这个错误，因为你的用户名数据不是一个数组，所以我建议你像这样更改你的代码。使您的用户名成为一个数组，然后将其推入数组

username: string[] = [];

this.username = this.username.push(users.valueChanges());

推荐阅读