Ошибка: '[объект Object]' типа 'объект'.NgFor поддерживает только привязку к итерациям, таким как массивы.- Ионный Проект

Question

Я пытаюсь получить имя пользователя моего пользователя из базы данных Firebase Firestore, используя Ionic и AngularFire.Я использую метод valueChanges() для получения наблюдаемого, затем пытаюсь интерпретировать наблюдаемое с помощью асинхронного канала.Однако, когда я запускаю код, я получаю следующую ошибку:

ошибка

Однако, когда я регистрирую наблюдаемое, оно выглядит так, как показано:

наблюдаемый

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>  

Заранее благодарим за любыеПомогите.

Answer 1

У вас есть эта ошибка, потому что ваши данные имени пользователя не являются массивом, поэтому я бы посоветовал вам изменить свой код следующим образом.Сделайте ваше имя пользователя массивом, затем вставьте его в массив

username: string[] = [];

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

Answer 2

Вы должны попытаться передать / отменить преобразование в массив сопоставленных результатов из вашей службы с помощью for и вернуть массив, например, так:

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

Answer 3

Привет, вы уверены, что users - это массив?

Может быть, простой console.log (пользователи) может лучше рассмотреть тип данных, которые вы получаете.