Estoy intentando hacer con Angular algo tan sencillo como realizar una consulta http y con el valor que me devuelve usarlo para otra consulta http.
Estoy utilizando httpClient y RXJS, de manera que he creado un servicio que hace las consultas http y luego lo llamo desde una pagina para algo tan sencillo como realizar una consulta http y con el valor que me devuelve usarlo para otra consulta http. Segun he visto en muchos tutoriales hay que suscribirse al Observable que me devuelve httpClient, pero al ser asincrono no puedo saber nunca si la primera consulta ha terminado antes de que se ejecute la segunda.
No se si me he explicado muy bien, pongo el codigo porque lo que quiero hacer es realmente sencillo pero por mas vueltas que le dou no se como solucionarlo con los metodos asincronos de RXJS, los observables, las suscripciones a los observables y todo este lio.
Ya he mirado un monton de tutoriales pero no veo en ninguno que me diga como esperar a que termine la primera llamada a una pagina web con httpclient para ejeuctar la segunda.
Supongo que estoy liado y se me ha cerrado la mente, porque no puede ser tan dificil hacer esto en angular ...
Este es el codigo del servicio para las llamadas a las paginas web:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class miServicio {
constructor(private httpClient: HttpClient) { }
/***********************************************/
/* lllamada a API WEB */
/* para obtener listado de noticias de un tema */
/***********************************************/
public obtenerNoticiasPorTema(idTema: string): Observable<any> {
return this.httpClient.get<Noticias[]>('https://localhost:8081/api/noticias/' + idTema);
}
/***********************************************/
/* lllamada a API WEB */
/* para obtener tema */
/***********************************************/
public obtenerTema(): Observable<any> {
return this.httpClient.get<Aplicacion>('https://localhost:8081/api/tema');
}
}
Aqui esta el codigo simplificado desde el que llamo al servicio desde mi pagina, nunca consigo que termine de ejecutarse this.servicioClikear.obtenerTema() antes de que se ejecute this.servicioClikear.obtenerNoticiasPorTema(idTema)
import { Component, OnInit, ViewChild } from '@angular/core';
import { miServicio } from 'src/app/bd/miServicio.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-blog',
templateUrl: './blog.page.html',
styleUrls: ['./blog.page.scss'],
})
export class BlogPage implements OnInit {
constructor(private oMiServicio: miServicio, private router: Router) {
}
ionViewWillEnter(){
let idTema: string = "";
this.servicioClikear.obtenerTema()
.subscribe(resultado => {
idTema = resultado;
});
this.servicioClikear.obtenerNoticiasPorTema(idTema)
.subscribe(noticias => {
console.log(noticias);
});
}
}
Cualquier ayuda sera bien recibida, llevo mucho tiempo intentando encontrar una solucion, y seguro que es algo m uy sencillo, pero no encuentro manera y he probado muchas cosas.