1

tengo un problema con el que no doy en la solucion...

tengo esta llamada en un servicio que me devuelve una listado de localizaciones:

  allData(){
    return this.http.get(`${this.apiUrl}`).subscribe(response => console.log(response));
  }

y en el component.ts lo recojo de esta forma

  locationsData: any;

  ngOnInit(): void {
    this.locationsData = this.locationsService.allData();
  }

la llamada y los datos me los trae perfectamente, pero a la hora de recorrerlo en un ngFor me salta el error de que es un objeto y no un array

<div>
    <ul>
        <li *ngFor="let location of locationsData">
            <span>{{ location.latitude }}</span>
            <span>{{ location.longitude }}</span>
        </li> 
    </ul>
</div>

me gustaria saber como seria la mejor forma o la mejor practica para jugar con servicios en angular y recibirlos para posteriormente mostrarlos en la app.

Muchas gracias y un saludo

1 respuesta 1

3

Hola Oscar el problema es que desde el método del servicio estas devolviendo la referencia a la suscripción al observable de la petición HTTP, la cual no contiene los datos de la respuesta.

Normalmente desde el servicio lo que se hace es devolver el observable que generas con los métodos del HttpClient y luego en el componente realizar la suscripción a dicho observable para ejecutar la llamada y extraer la respuesta.

El servicio por tanto quedaría algo así

export class LocationsService {
  ... 

  allData(){
    return this.http.get(`${this.apiUrl}`);
  }
}

Puedes ir incluso más allá y marcar el tipo de los datos de respuesta en los métodos del HttpClient usando una interfaz, para obtener mejor seguridad de tipo a la hora de consumir después el observable.

export interface Location {
  latitude: string;
  longitude: string;
}

export class LocationsService {
 ... 

  allData(): Observable<Location[]>{
    return this.http.get<Location[]>(`${this.apiUrl}`);
  }
}

Y una vez tienes definido el servicio, para consumirlo en el componente, tienes que realizar la suscripción. La forma más segura es utilizando la pipe | async en el template a continuación de la propiedad en la que has asignado el observable del servicio.

<div>
    <ul>
        <li *ngFor="let location of locationsData | async">
            <span>{{ location.latitude }}</span>
            <span>{{ location.longitude }}</span>
        </li> 
    </ul>
</div>

Esta se encargará de subscribirse al observable, extraer las notificaciones emitidas y cancelar la suscripción automáticamente cuando el componente sea destruido.

Si en vez de usar la pipe async, quisieras realizar la suscripción manualmente en el componente, te quedaría algo similar a lo siguiente.

export class TuComponente implements OnInit, OnDestroy {
  locationsData!: Observable<Location[]>;
  subscription!: Subscription;

  ...

  ngOnInit(): void {
    this.subscription = this.locationsService.allData().subscribe((response) => this.locationsData = response);
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

Espero haberte ayudado, un saludo.

4
  • me ha servido perfectamente! muchisimas gracias, tambien me gustaria saber como llamar de nuevo a la funcion despues de eliminar uno de los datos, el 8 dic. 2021 a las 22:27
  • esta es mi funcion deleteLocation(id: number) { let API_URL = ${this.apiUrl}${id}; return this.http.delete(API_URL).subscribe(); } el 8 dic. 2021 a las 22:27
  • @oscarplumariega Si la respuesta te ha sido de utilidad sería bueno que la marcaras como aceptada dentro del tiempo señalado! Y votar arriba siempre es bien recibido.
    – Legna
    el 9 dic. 2021 a las 5:11
  • 1
    Quita nuevamente la llamada a subscribe en el método del servicio para devolver el observable y desde el método del componente te suscribes y en la función del subscribe, si estas usando la pipe async reasignas la propiedad locationsData. delete(id) { this.locationsService.deleteLocation(id).subscribe( (_) => this.locationsData = this.locationsService.allData() }
    – akotech
    el 9 dic. 2021 a las 10:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.