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.