firebase - Ionic 3 和 Firebase - NgFor 仅支持绑定到 Iterables，例如 Arrays

Question

我正在 Ionic 中构建一个应用程序，它将遍历一个 for 循环并显示我的 Firebase 数据库中的数据。但是当我尝试ionic serve查看页面时，我的代码给出了以下错误：

RROR Error: Cannot find a differ supporting object '[object Object]'
of type 'User Name'. NgFor only supports binding to Iterables such as 
Arrays.

由于我是 Firebase、Ionic 和 Angular 的初学者，我不确定我需要在哪里或如何创建一个数组来保存我的数据（如果这是我的错误所暗示的——我不完全确定）。我想知道是否可以从更熟悉 Ionic 和 Angular 的人那里获得一些帮助。

我的相关代码：

import { Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireModule } from "angularfire2";
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs-compat';
import * as firebase from 'firebase';

/**
 * Generated class for the MemberListPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-member-list',
  templateUrl: 'member-list.html',
})
export class MemberListPage {

  users;

  constructor(public navCtrl: NavController, public navParams: NavParams, public afd: AngularFireDatabase) {
    this.getDataFromFirebase();
  }

  getDataFromFirebase(){
    var ref = firebase.database().ref('/profile/user001/');
      ref.on('value', profileSnapshot => {
        this.users = profileSnapshot.val();
        console.log(profileSnapshot.val());
      })
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MemberListPage');
  }


}

还有我的 HTML：

<ion-header>

  <ion-navbar>
    <ion-title>Member List</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding class="bg">
  <p>This page will pull information about members from a database
     that has not yet been implemented.</p>
  <p>Below is an example profile for a member: </p>
  <ion-card *ngFor="let user of users">
      <ion-card-header>
        <strong>Name</strong>: {{user.name}}
        <br><br>
        <strong>Position</strong>: {{user.position}}
        <br><br>
        <strong>E-mail</strong>: {{user.email}}
        <br><br>
        <strong>Member Since</strong>: {{user.joinDate}}
        <br><br>
        <strong>Social Media</strong>:
        <br><br>
        <button ion-button icon-start (click)="goFacebook()">
          <ion-icon name="logo-facebook"></ion-icon>
        </button>
        <button ion-button icon-start (click)="goInstagram()">
          <ion-icon name="logo-instagram"></ion-icon>
        </button>

      </ion-card-header>

    </ion-card>

</ion-content>

标签： firebasefirebase-realtime-databaseionic3ngfor

Answer 1

如果您的 Firebase 数据结构是这样的

然后试试这个

users: any = [];

ref.once('value', (resp) => {
        let i, j, snapshot = resp.val();
        for(i in snapshot){
            for(j in snapshot[i]){
                this.users.push(snapshot[i][j]);
            }
        }
        console.log('df', this.users);
 });