1

This is how my database looks. I want to be able to grab all the names that are currently in the database and display them in form of list in the project.

Profile
  |
  |_ poTXrbBlRmZVCulutiHYBp3lj5D2
  |       |
  |       |_ Name :
  |       |
  |       |_ Email :
  |
  |_ hn3ds4hdsbBlRmpVCulutiHYBH3lj
  |       |
  |       |_ Name :
  |       |
  |       |_ Phone :

This is my home.ts file code. I want to show list of users as output in my .html file 

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase } from 'angularfire2/database';

@Component({
  selector: 'page-main',
  templateUrl: 'main.html',
})
export class MainPage {

userId : string = "";


  constructor( public fire: AngularFireAuth, public navCtrl: NavController, 
  public db: AngularFireDatabase, public navParams: NavParams ) {
      this.userId = fire.auth.currentUser.uid;
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MainPage');

  }

}
Neel Khamar
  • 19
  • 1

1 Answers1

0

To get a list of the names, you can pull the whole list of objects saved in the database and put them in an array in your .ts file.

profiles:any = [];

this.db.list('Profile').valueChanges().take(1).subscribe(res => {

this.profiles = res;

});

Using the array, you can reference the names associated with the profiles and display them in your .html file.

<ion-list>
<ion-item *ngFor="let person of profiles">
{{person.Name}}
</ion-item>
</ion-list>
Troy Myers
  • 520
  • 4
  • 14
  • getting error : polyfills.js:3 Uncaught TypeError: Object(...) is not a function at SwitchMapSubscriber.project (changes.js:7) at SwitchMapSubscriber._next (switchMap.js:90) at SwitchMapSubscriber.Subscriber.next (Subscriber.js:93) at RefCountSubscriber.Subscriber._next (Subscriber.js:129) at RefCountSubscriber.Subscriber.next (Subscriber.js:93) at Subject.next (Subject.js:55) at ConnectableSubscriber.Subscriber._next (Subscriber.js:129) – Neel Khamar Jun 21 '18 at 21:54
  • Read through [this](https://stackoverflow.com/questions/50348643/typeerror-object-is-not-a-function). You may have to update rxjs and you have to import the take operator or just remove it from the code in my answer. – Troy Myers Jun 21 '18 at 22:00
  • i updated the rxjs and removed the take operator but still showing the same error brother. – Neel Khamar Jun 21 '18 at 22:24