3

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>
0

4 respuestas 4

1

Puedes usar la funcion pipe y luego un subscribe para obtener los datos y mandarlos a tu vista

this._Peticiones.getUser().pipe(
            mergeMap(data => {
                this.listUsers = data;
                data.forEach((current: any) => {
                   listUsers.push(current);
                });
                return forkJoin(listUsers);
            })
        ).subscribe((response: any) => {
            this.UsuariosJSON= response.data; // o response[0]

        });
2
  • Gracias por el dato amigo, desconocía la función pipe pero me parece interesante muchas gracias por tu tiempo Commented el 28 ene. 2020 a las 13:23
  • @MissaelArmenta no funciono mi respuesta? Commented el 28 ene. 2020 a las 13:46
0

Puedes utilizar el caracter ? antes de obtener la propiedad del objeto para validar de que si existe informacion en UsuariosJSON, entonces si traiga la propiedad

Ejemplo:

<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>
0

Tu servicio devuelve un solo objeto o un array? si devuelve un array deberías utilizar un ngFor en tu html

<div class="row">
<div class="col-md-12" >
    <p *ngFor="let item of UsuariosJSON">Nombre: {{item?.first_name}} {{ item?.last_name}}</p>
</div>

O de lo contrario hacerlo como lo estás intentando, solo que hay que proteger las propiedades con el signo ? para que no te muestre errores en consola antes de que tu objeto UsuariosJSON tenga datos

<div class="row">
<div class="col-md-12" >
    <p>Nombre: {{UsuariosJSON?.first_name}} {{ UsuariosJSON?.last_name}}</p>
</div>

0

Yo crearia un *ngIf en el componente que esta cargando los datos y lo mantendria oculto hasta que los datos fueran diferentes de null. Para esto iniciaria asi en mi componente:

UsuariosJSON:any = null

En mi html validaria:


<div *ngIf="UsuariosJSON" class="row">
    <div class="col-md-12" >
        <p>Nombre: {{UsuariosJSON.first_name}} {{ UsuariosJSON.last_name}}</p>
    </div>
</div>

Y mostraria un pequeno mensaje si no hay datos con otro codigo:


<div *ngIf="!UsuariosJSON" class="row">
   No hay datos para mostrar
</div>

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.