Arhn - архитектура программирования

ОШИБКА: NgFor поддерживает привязку только к Iterables, таким как массивы

Я просто показываю имя из объекта, который я сохранил в userlist, используя ngfor.

ОШИБКА: browser_adapter.js: 84 ОРИГИНАЛЬНОЕ ИСКЛЮЧЕНИЕ: Невозможно найти другой поддерживающий объект '[object Object]' типа 'object'. NgFor поддерживает привязку только к Iterables, таким как Arrays.

введите описание изображения здесь

user-list.ts

import { Component } from '@angular/core';
import { NavController,Popover,ViewController,PopoverController } from 'ionic-angular';
import { NavParams } from 'ionic-angular';
declare var firebase;

@Component({
  templateUrl: 'build/pages/firebase/user-list/user-list.html'
})
export class UserListPage {

  userlist:any;
  users:any;
  _db:any;
  constructor(private popoverCtrl: PopoverController,private navCtrl: NavController,public loadingCtrl: LoadingController) {
    let loader = this.loadingCtrl.create({
      content: "Please wait..."
    });
    loader.present();
     this._db = firebase.database().ref('/');
       this._db.on('value', (dataSnapshot)=> {
         console.log(dataSnapshot.val());
         this.userlist=dataSnapshot.val();
         loader.dismiss();
       });
  }
}

user-list.html

<ion-content>
  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
  <ion-list>
    {{userlist | json }}
    <ion-item *ngFor="let user of userlist" >
      {{user.name}}
    </ion-item>
  </ion-list>
</ion-content>
angular ionic2
29.09.2016

  • Это должен быть массив. Если у вас только один пользователь, нет необходимости использовать ngFor. Вы не можете перебирать какой-либо объект. 29.09.2016

Ответы:


1

Функция val снимка возвращает объект, а не массив.

Вместо этого вы можете присвоить userlist пустой массив, на который вы можете поместить дочерние элементы снимка:

this._db = firebase.database().ref('/');
this._db.on('value', (dataSnapshot)=> {
  this.userlist = [];
  dataSnapshot.forEach((childSnapshot) => {
    this.userlist.push(childSnapshot.val());
  });
  loader.dismiss();
});

Кроме того, при вызове on, а не once, ваш обратный вызов будет вызываться, если данные изменятся. Это означает, что loader.dismiss() можно вызывать несколько раз, что потенциально может быть проблемой, в зависимости от его реализации.

29.09.2016
Новые материалы
Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..