无法以角度 6 从 Firebase 获取用户列表

Question

我无法在 Firebase 中获取用户列表。 Firebase 数据库已经有一组值，但我得到了空数组。

我能够成功地将用户添加到 firebase 数据库，甚至能够获取用户列表。

它将访问数据库并获取数据，但我如何在视图中显示。 我能够得到空数组的列表。

请帮帮我

我的 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();
}

}

我的服务文件

  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

以下更改对我有用。

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

}