Not able to get the list of user from Firebase in angular 6

Question

I am not able to get the list of user in Firebase. Firebase database has already set of values but i got empty arrays.

I am able to add the user to firebase database successfully and even i am able get the list of users.

it will hit the database and get the data but how can i display in the view. I am able to get list of empty array.

please help me out

My addUserComponent

import { Component, OnInit } from '@angular/core';
import { UserService } from '../userpost.service';
import { FormGroup, FormControl, Validator, Validators } from '@angular/forms';

@Component({
 selector: 'app-addpost',
 templateUrl: './adduser.component.html',
 styleUrls: ['./adduser.component.css']
})
export class AddUserComponent implements OnInit {

employeeList: any;
 frm: FormGroup;

 constructor(private _userpost: UserService) { }

 ngOnInit() {
  this.getAllUser();

  this.frm = new FormGroup({
  name: new FormControl(''),
  position: new FormControl(''),
  office: new FormControl(''),
  salary: new FormControl(''),
  });
}

getAllUser() {
 this._userpost.getAllUser().snapshotChanges()
 .subscribe( res => {
  this.employeeList = res;
  console.log(this.employeeList);
 })

}

addUser(frm) {
 console.log(frm.value);
  this._userpost.insertUser(this.frm.value);
  this.frm.reset();
}

}

My service file

  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
  import { User } from './user.model';

  @Injectable({
   providedIn: 'root'
  })
  export class UserService {

  userpostList: AngularFireList<User>;
  selectedEmployee: User = new User();

  constructor(private httpClient: HttpClient, private _firebase: 
    AngularFireDatabase) { 
    this.userpostList = _firebase.list('/userpost');
}

  getAllUser(): AngularFireList<User> {
    return this.userpostList;
  }

  insertUser(frm: User) {
    this.userpostList.push(frm);
 }

}

Answer 1

Below changes works for me.

getAllUser() {
this._userpost.getAllUser().snapshotChanges()
  .subscribe(res => {
    this.employeeList = [];
    res.forEach(element => {
      let x = element.payload.toJSON();
      x["$key"] = element.key;
      this.employeeList.push(x as User);
    });
  });

}