Soy nuevo en Angular y tengo un pequeño problema con una Observable, resulta que al consultar un API todo funciona de manera correcta, me trae los datos requeridos.
El problema es como evitar que la consola del navegador me muestre error por datos indefinidos.
Resulta que mi Observable recupera los datos al momento de suscribirse, sin embargo cuando el componente se inicializa, carga primero el HTML(la vista). Cuando quiere acceder a los datos devueltos por la API aun mi Observable no se ha completado (de allí los valores undefined
).
Una vez que la promesa se completa los datos se pintan correctamente y todo se ve bien, pero no me agrada tener ese error en consola. Hasta ahora lo he solucionado haciendo una validación en el complete "Si hay datos pintalos si no no"
¿Alguna otra sugerencia de cual seria la mejor manera de evitar dicho error ?
De ante mano muchas gracias
Dejo mi componente, considere que "Peticiones" es un servicio que implementa HttpClient y todo funciona bien
import { Component, OnInit } from '@angular/core';
import { Peticiones } from '../services/externo.service';
@Component({
selector: 'app-externo',
templateUrl: './externo.component.html',
styleUrls: ['./externo.component.css'],
providers:[Peticiones]
})
export class ExternoComponent implements OnInit {
public UsuariosJSON : any;
constructor(private _Peticiones : Peticiones) {
}
ngOnInit() {
this._Peticiones.getUser().subscribe(response=>{
this.UsuariosJSON= response.data;
console.log(this.UsuariosJSON);
},reject=>{
console.log(reject);
},function(){
console.log("complete")
})
}
}
El HTML
<div class="row">
<div class="col-md-8">
<h1>Peticinoes a un server externo</h1>
</div>
</div>
<div class="row">
<div class="col-md-12" >
<p>Nombre: {{UsuariosJSON.first_name}} {{ UsuariosJSON.last_name}}</p>
</div>
</div>