Tengo dos API, sus datos tienen identificadores similares y valores diferentes. los datos son asi:
noches =
{ yearNo: 2014, monthNo: 7, countryId: 6162, countryNameGe: "რუსეთის ფედერაცია", gender: 1, ageGroup: 2, nights: 26124560 },visitas =
{ yearNo: 2020, monthNo: 10, countryId: 5967, countryNameGe: "აზერბაიჯანი", tourType: 1, gender: 1, ageGroup: 1, value: 7502768 },Quiero mostrar datos relacionados (cuando los ID de país son iguales) uno al lado del otro en la tabla (html)
este es mi 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); }primero lo intenté de esta manera, pero me sale que esto no funciona:
<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>Luego intenté lo siguiente:
const resulti = this.countryDatas.map((obj:any) => ({ ...obj, ...this.nightDatas.find((o:any) => o.countryId === obj.countryId), }));pero devuelve una matriz vacía.
¿Que puedo hacer en esta situacion?
Combinar dos objetos de datos dentro de subscribe.
forkJoin emitirá datos cuando se haya recibido una respuesta para todos
ngOnInit() { forkJoin({ countriesList: this.getQueryCountriesList(), nights: this.getQueryNights() }) .subscribe(({countriesList, nights}) => { resulti = countriesList.map((obj:any) => ({ ...obj, ...nights.find((o:any) => o.countryId === obj.countryId), })); }); }Simplemente haz esto:
this.countryDatas.forEach((object:any)=>{ if (object.id === this.nightDatas.id){ this.similarDatas = object } }luego en su archivo HTML, simplemente haga esto:
<th [id]="country.countryId + '1'">{{ similarDatas.countryNameGe }}</th> <td [id]="country.countryId + '2'">{{ similarDatas.value }}</td> <td [id]="country.countryId + '3'">{{ similarDatas.value }}</td>