CODEWITHSUNDEEP
javascriptangularfirebase-realtime-databaseionic3angularfire2
Rodrigo Assis
Rodrigo Assis

Reputation: 33

Display AngularFireList data on HTML gets me an error

I'm trying to display the data retrieved from my firebase on Home.html, but I keep getting the same error over and over:

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

Can you help me?

I have the following code on my application:

user.service.ts

import { AngularFireList } from 'angularfire2/database/interfaces';
import { AngularFireDatabase } from 'angularfire2/database';

export class UserService {

  users: AngularFireList<User[]>;

  constructor(
    public http: HttpClient,
    public af: AngularFireDatabase
  ) {
    this.users = this.af.list('users');
  }

  create(user: User): void {
    this.af.list('users').push(user);
  }
}

home.ts

import { UserService } from './../../providers/user/user.service';
import { AngularFireList } from 'angularfire2/database/interfaces';

export class HomePage {

  users: AngularFireList<User[]>;

  constructor(
    public navCtrl: NavController,
    public userService: UserService
  ) {

  }

  ionViewDidLoad(){
    this.users = this.userService.users;
  }

home.html

<ion-content padding>

  <ion-list no-lines>
    <button ion-item *ngFor="let user of users">
      {{ user.name }}
    </button>
  </ion-list>

  <button ion-button block (click)="onSignUp()">Sign Up</button>
</ion-content>

Upvotes: 0

Views: 451

Answers (2)

Rodrigo Assis
Rodrigo Assis

Reputation: 33

EDIT: 2018-08-06

This have solved my problem:

On my user.service.ts I've declared my vars like this:

usersRef: AngularFireList<any>;
users: Observable<any[]>;

And in the constructor:

this.usersRef = this.af.list('users');
this.users = this.usersRef.valueChanges();
this.users.subscribe(res => console.log(res));

This way I'm able to recover the values from 'users' on my HTML like this:

<ion-list no-lines>
    <button ion-item *ngFor="let user of users | async">
      {{ user.name }}
    </button>
</ion-list>

And in home.ts:

users: Observable<any[]>;

ionViewDidLoad(){
  this.users = this.userService.users;
}

Upvotes: 0

willmaz
willmaz

Reputation: 2475

change this :

this.users = this.af.list('users');

to that :

this.users = this.af.list('users').valueChanges();

Upvotes: 1

Related Questions