0

tengo un detalle, cuando listo las personas funciona bien, pero cuando le doy ingresar una persona se envia a la base de datos (Firebase realtime), pero no me aparece en la lista de personas ese registro que acabo de ingresar, debo refrescar la pagina para que funcione, y si ingreso dos seguidos sin refrescar la pagino el primero que ingrese no se guarda, ya revise y no entiendo que estoy haciendo mal, agradeceria su ayuda.

data.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { PersonasModels } from './personas/personas.models';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
constructor(private httpClient: HttpClient) { }

  cargarDatos(): Observable<PersonasModels[]> {
    return this.httpClient.get<PersonasModels[]>('https://angular-f7eae-default-rtdb.firebaseio.com/Datos.json');
  }

  enviarDatos(personas: PersonasModels[]) {
    this.httpClient.put('https://angular-f7eae-default-rtdb.firebaseio.com/Datos.json', personas)
    .subscribe({
      next: Response => console.log("Todo correcto " + Response),
      error: Error => console.log("Error " + Error)
    });
  }

}

personas.service.ts

import { Injectable } from '@angular/core';
import { DataService } from '../data.service';
import { PersonasModels } from './personas.models';

@Injectable()
export class PersonasService {

  constructor(private dataServices: DataService) { }

  lista_personas: PersonasModels[] = [];

  agregarPersona(persona: PersonasModels) {
    if (this.lista_personas == null) {
      this.lista_personas = [];
    }
    this.lista_personas.push(persona);
    this.dataServices.enviarDatos(this.lista_personas);
  }

  obtenerDatos() {
    return this.dataServices.cargarDatos();
  }

}

listapersonas.component.ts

import { Component, OnInit } from '@angular/core';
import { PersonasModels } from '../personas/personas.models';
import { PersonasService } from '../personas/personas.service';

@Component({
  selector: 'app-listarpersonas',
  templateUrl: './listarpersonas.component.html',
  styleUrl: './listarpersonas.component.css'
})
export class ListarpersonasComponent implements OnInit {

  constructor(private personasServices: PersonasService) { }

  lista_personas: PersonasModels[] = []
  ngOnInit() {
    this.personasServices.obtenerDatos()
    .subscribe({
      next: (lista_personas: PersonasModels[]) => {
          this.personasServices.lista_personas = lista_personas;
          this.lista_personas = this.personasServices.lista_personas;
          console.log(lista_personas);
        }
    })
  }
}

personas.component.ts

import { Component } from '@angular/core';
import { PersonasService } from './personas.service';
import { PersonasModels } from './personas.models';
import { Router } from '@angular/router';

@Component({
  selector: 'app-personas',
  templateUrl: './personas.component.html',
  styleUrl: './personas.component.css'
})
export class PersonasComponent {

  constructor(private personasServices: PersonasService, private router: Router) { }

  nombre: String = "";
  apellido: String = "";

  agregarPersona() {
    this.personasServices.agregarPersona(new PersonasModels(this.nombre, this.apellido));
    this.nombre = "";
    this.apellido = "";
    this.router.navigate(['ListarPersonas']);
  }

}

1 respuesta 1

0

No es un detalle, es un error de implementación o diseño. En ningún momento indicas que se actualice el componente, haciendo una petición GET después de agregar un elemento debería ser suficiente. También tienes la alternativa de agregarlo al arreglo y no hacer doble petición (crear y obtener).

agregarPersona() {
  this.personasServices.agregarPersona(new PersonasModels(this.nombre, this.apellido));
  this.personasServices.obtenerDatos().subscribe({
    next: (lista_personas: PersonasModels[]) => {
      this.personasServices.lista_personas = lista_personas;
    }
  });
}

Como extra:

  1. Estas dos líneas son redundantes:
this.personasServices.lista_personas = lista_personas;
this.lista_personas = this.personasServices.lista_personas;

al menos que por alguna razón necesites mantener una copia.

  1. Reutiliza el manejo de errores:
private errorHandler(error: any) : void {
 console.error("Ocurrió un error: ", error);
}

queda así:

catchError(this.manejarError) 

ó

error: this.manejarError

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.