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