I'm learning Angular and the course is outdated. I'm writing a very simple app which shows a list of people created from Persona
class which receives the parameters nombre
and apellido
.
The code is the following:
data.services.ts:
cargarPersonas(){
return this.httpClient.get('https://listado-personas-53faf-default-rtdb.firebaseio.com/personas.json');
}
guardarPersonas(personas: Persona[]){
this.httpClient.put('https://listado-personas-53faf-default-rtdb.firebaseio.com/personas.json', personas).subscribe(
response => alert(`Datos enviados correctamente: ${response}`),
error => alert(`Error al enviar los datos: ${error}`)
);
}
persona.service.ts:
setPersonas(personas: Persona[]){
this.personas = personas;
}
obtenerPersonas(){
return this.dataService.cargarPersonas();
}
agregarPersona(persona: Persona) {
this.logginService.enviarMensajeAConsola('agregamos persona:' + persona.nombre);
if(this.personas == null){
this.personas = [];
}
this.personas.push(persona);
this.dataService.guardarPersonas(this.personas);
}
personas.component.ts:
ngOnInit(): void {
this.personasService.obtenerPersonas().subscribe(
(personas: Persona[]) => {
this.personas = personas;
this.personasService.setPersonas(personas);
}
);
}
By doing this I receive the error No overload matches this call
.
Doing research I found that I should modify the subscription on personas.component.ts as follows:
this.personasService.obtenerPersonas().subscribe(
(personas: Object) => {
this.personas = personas as Persona[];
this.personasService.setPersonas(personas as Persona[]);
}
);
That solved the previous error, however now I get this another error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
.
When I do a console.log()
of the object that I receive when I subscribe (personas
) I can see that it's an object which contains an array (I left you an image of it at the end), but I don't know how to access to this array because when I try to iterate it I also get an error. When trying Object.keys(personas)
I get a string with the name of the key and with Objects.values(personas)
I get another object.
How can I work with the Persona's objects array that I get from Firebase?
The method cargarPersonas()
is not returning an Observable<Persona[]>
, it's returning and http response object. In order to return the wanted type, you should change it to the following:
cargarPersonas(){
return this.httpClient.get<Persona[]>('https://listado-personas-53faf-default-rtdb.firebaseio.com/personas.json');
}
this also means you don't need to cast the argument:
this.personasService.obtenerPersonas().subscribe(
(personas:Persona[]) => {
this.personas = personas;
this.personasService.setPersonas(personas);
}
);
An explanation of how it works can be found in this doc