I have been debugging and I suspect that the error lies in this part of the code. The DataService class's cargarPersonas function returns an Observable object, but I am struggling to understand how to properly retrieve the database data and display it on the web:
ngOnInit(): void {
this.personaService.obtenerPersonas()
.subscribe({
complete: () => (personas: Persona[]) => {
this.personas = personas;
this.personaService.setPersonas(personas);
}
});
};
This is what my database looks like in terms of data:
https://i.sstatic.net/ZPAIp.png
Here is my Personas.component.ts class:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Persona } from '../persona.model';
import { PersonasService } from '../personas.service';
@Component({
selector: 'app-personas',
templateUrl: './personas.component.html',
styleUrls: ['./personas.component.css']
})
export class PersonasComponent implements OnInit{
personas: Persona[] = [];
constructor(
private personaService: PersonasService,
private router:Router
) { }
ngOnInit(): void {
this.personaService.obtenerPersonas()
.subscribe({
complete: () => (personas: Persona[]) => {
this.personas = personas;
this.personaService.setPersonas(personas);
}
});
};
agregar(){
this.router.navigate(['personas/agregar']);
}
}
This is my Data.services.ts class:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Persona } from './persona.model';
@Injectable()
export class DataServices{
constructor(private httpClient: HttpClient){}
cargarPersonas(){
return this.httpClient.get('https://listado-personas-4f1c0-default-rtdb.europe-west1.firebasedatabase.app/datos.json');
}
//Guardar personas
guardarPersonas(personas:Persona[]){
this.httpClient.put('https://listado-personas-4f1c0-default-rtdb.europe-west1.firebasedatabase.app/datos.json',personas)
.subscribe({
complete: () => { console.log("Saving People: " + Response) }, // completeHandler
error: () => { console.log("Error saving people: "+ Error) }, // errorHandler
});
}
}
This is my Personas.services.ts class:
import { LoggingService } from "./LogginService.service";
import { Persona } from "./persona.model";
import { EventEmitter, Injectable } from '@angular/core';
import { DataServices } from "./data.services";
@Injectable()
export class PersonasService{
personas: Persona[] = [];
saludar = new EventEmitter<number>();
constructor(private logginService: LoggingService, private dataService:DataServices){}
setPersonas(personas:Persona[]){
this.personas = personas;
}
obtenerPersonas(){
return this.dataService.cargarPersonas();
}
agregarPersona(persona: Persona){
this.logginService.enviaMensajeAConsola("agregamos persona: " + persona.nombre);
if(this.personas == null)
{
this.personas = [];
}
this.personas.push(persona);
this.dataService.guardarPersonas(this.personas);
}
encontrarPersona(index:number){
let persona: Persona = this.personas[index];
return persona;
}
modificarPersona(index:number, persona:Persona){
let persona1 = this.personas[index];
persona1.nombre = persona.nombre;
persona1.apellido = persona.apellido;
}
eliminarPersona(index:number){
this.personas.splice(index,1);
}
}
This is my personas.component.html:
<div style="text-align: center;">
<button style="cursor:pointer" (click)="agregar()">+</button>
</div>
<div class="box">
<app-persona
*ngFor="let personaElemento of personas; let i = index"
[persona] = "personaElemento"
[indice] = "i"
>
</app-persona>
</div>
<router-outlet></router-outlet>
Edited: attempting to use Next:
Using next doesn't execute the two statements inside the arrow function.