Hello,
I am working with tabs. I am using weather API.
On the TAB1, I am loading current weather data.
On the TAB2, I am loading forecast data. This is happening in the shared services.
So I can call the API once and get all this data I need.
The CODE:
**let row = document.querySelector(".card");**
**row.innerHTML** = data['forecast']['forecastday']
.map((day) => {
this.fcondition = day['day']['condition']['text']
this.html = `<ion-card>
<ion-card-content >
<ion-item>${this.fcondition}</ion-item>
</ion-card-content>
</ion-card>`;
return this.html;
}).join(' ');
The problem:
The HTML element (".card") is in the TAB2. And it is not loaded when I open the app on TAB1 ofcs.
So when the row.innerHTML happens the (".card") is still undefined. For this to work I first have to open the TAB2, then go back to TAB1, do my search and the data loads into the .card element just okay.
Can smbd help me please? How can I load the HTML data for TAB2 without going there first
This is the HTML for TAB2
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
FORECAST
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<div class="card"></div>
</ion-content>
1 post - 1 participant