Ionic 3 и Firebase - NgFor поддерживает только привязку к итерируемым объектам, таким как массивы - PullRequest
Новая
       22

Ionic 3 и Firebase - NgFor поддерживает только привязку к итерируемым объектам, таким как массивы

0 голосов
/ 29 октября 2018

Я создаю приложение на 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>

1 Ответ

0 голосов
/ 29 октября 2018

Если ваша структура данных Firebase такая, как эта

enter image description here

Тогда попробуйте это 

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