无法在 angular 6 中从 Firebase 获取用户列表
Not able to get the list of user from Firebase in angular 6
我无法在 Firebase 中获取用户列表。
Firebase 数据库已经设置了值,但我得到的是空数组。
我能够成功地将用户添加到 firebase 数据库,甚至我能够获得用户列表。
它将访问数据库并获取数据,但我如何在视图中显示。
我能够得到空数组的列表。
请帮帮我
我的添加用户组件
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);
}
}
以下更改对我有用。
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);
});
});
}
我无法在 Firebase 中获取用户列表。 Firebase 数据库已经设置了值,但我得到的是空数组。
我能够成功地将用户添加到 firebase 数据库,甚至我能够获得用户列表。
它将访问数据库并获取数据,但我如何在视图中显示。 我能够得到空数组的列表。
请帮帮我
我的添加用户组件
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);
}
}
以下更改对我有用。
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);
});
});
}