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

还有我的html

<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（）保存数据时，这里是数据库。

Database with set() method instead of push()

这是我使用的时间：

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

代替

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

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

Answer 2

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

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

Firebase Angular：如何检索和显示数据？

2 个答案: