Ionic 3和Firebase-NgFor仅支持绑定到数组等Iterables

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>

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);
 });