Tengo dos API:
componente.ts
ngOnInit(): void { this.getQueryCountriesList().subscribe(arg => { this.countryDatas = arg; }); this.getQueryNights().subscribe(obj => { this.nightDatas = obj; }); ........ ...... getQueryCountriesList(){ return this.http.get<any>(this.APIUrl + "/Visitor?tourType="+ this.tourType +"&year=" + this.selectedYear + "&month=" + this.selectedMonth +"&gender=" + this.selectedGender + "&age="+this.selectedAge); } getQueryNights(){ return this.http.get<any>(this.APIUrl + "/Nights?tourType="+ this.tourType +"&year=" + this.selectedYear + "&month=" + this.selectedMonth +"&gender=" + this.selectedGender + "&age="+this.selectedAge); }cada dato tiene la misma identificación, quiero mostrar visitas (de la primera API) y noches (segunda API) una al lado de la otra en la tabla: componente.html
<tr *ngFor="let country of countryDatas; let nights; of: nightDatas"> <th [id]="country.countryId + '1'">{{ country.countryNameGe }}</th> <td [id]="country.countryId + '2'">{{ country.value }}</td> <td [id]="country.countryId + '3'">{{ nights.value }}</td> </tr>con el siguiente código obtengo solo noches o solo visitas en cada columna al azar
Intente usar Promise.all() para esperar a que las dos api devuelvan la respuesta, puede ser útil.
Puedes usar el poder de rxJS. En este caso, puede usar forkJoin .
import { forkJoin } from 'rxjs'; ngOnInit(): void { forkJoin({ countries: this.getQueryCountriesList(), nights: this.getQueryNights() }).subscribe(({countries, nights}) => { this.countryDatas = countries; this.nightDatas = nights; }); Entonces, ¿qué está pasando aquí? Con forkJoin , está esperando que se emitan ambos observables de su API, luego emita un objeto que contenga sus datos.
Puede usar el operador rxjs combineLatest que esperará a que ambos observables emitan al menos un valor. Y a partir de ahí, construya su matriz que contenga ambos valores:
import { combineLatest } from 'rxjs'; ngOnInit(): void { queryCountriesList$ = this.getQueryCountriesList(); queryNights$ = this.getQueryNights(); combineLatest([queryCountriesList$,queryNights$]) .subscribe(([queryCountriesList, queryNights]) => { // create your object here } }