Firebase Angular : 如何检索和显示数据?

Question

在我的火力基地。我为我的用户准备了这个数据库：

我的数据库

我有这个服务来管理我的用户：

import { Injectable } from '@angular/core';
import {User} from '../models/user.model';
import {Subject} from 'rxjs/Subject';
import * as firebase from 'firebase';
@Injectable({
providedIn: 'root'
})
export class UsersService {
users: User[] = [];
usersSubject = new Subject<User[]>();
constructor() { }
emitUsers(){
this.usersSubject.next(this.users);
}
saveUsers(){
firebase.database().ref('/users').push(this.users);
}
getUsers(){
firebase.database().ref('/users')
.on('value',(data)=>{
this.users = data.val() ? data.val() : [];
this.emitUsers();
});
}
getSingleUser(id:number){
return new Promise(
(resolve,reject) =>{
firebase.database().ref('/users/'+id).once('value').then(
(data) =>{
resolve(data.val());
}, (error) => {
reject (error);
}
);
}
);
}
createNewProfile(newUser:User){
this.users.push(newUser);
this.saveUsers();
this.emitUsers();
}
removeUser(user:User){
const userIndexToRemove=this.users.findIndex(
(userEl)=>{
if(userEl==user){
return true;
}
}
);
this.users.splice(userIndexToRemove,1);
this.saveUsers();
this.emitUsers();
}
}

这个组件显示我的用户列表：

import { Component, OnInit } from '@angular/core';
import {UsersService} from '../services/users.service';
import {Subscription} from 'rxjs/Subscription';
import {User} from '../models/user.model';
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.scss']
})
export class UserListComponent implements OnInit {
users:User[];
usersSubscription:Subscription;
constructor(private usersService: UsersService) { }
ngOnInit(): void {
this.usersSubscription = this.usersService.usersSubject.subscribe(
(users:User[])=>{
this.users=users;
}
);
this.usersService.emitUsers();
this.usersService.getUsers();
console.log(this.users);
}
}
}

和我的网页

<div class="row">
<div class="col-xs-12">
<h2>Users</h2>
<div class="list-group"
*ngFor="let user of users | keyvalue async">
<p> Hello {{user.firstName}}</p>
</div>
</div>
</div>

我不知道为什么，但是，我的数据库中有 2 个用户，我的输出只是： "你好" "你好" 和名字没有写 你知道为什么吗？

多谢！

Answer 1

这是我使用 set(( 方法而不是 push(( 保存数据时的数据库。

使用 set(( 方法代替 push(( 的数据库

当我使用：

saveUsers(){
firebase.database().ref('/users').set(this.users);
}

而不是

saveUsers(){
firebase.database().ref('/users').push(this.users);
}

在这种情况下，它正在工作。我的输出是Hello Ibra和Hello Pires。但是在这种情况下，我的问题是我没有像推送那样的唯一ID。

Answer 2

您似乎正在通过keyvalue管道传递用户，而不是使用其输出。

在您的 HTML 中尝试将user.firstName替换为user.value.firstName