Hi,
I don’t understand how tabs work with data. I created 2 pages, one for the tables, one for the content, and the tabs refuse to appear when I load content from the api. Here is my code :
CompetitionTabs :
ionViewCanEnter() {
console.log('load tabs');
return new Promise((resolve) => {
this.competitionProvider.get(this.navParams.get('id')).subscribe(response => {
this.name = response.data.competition.name;
this.competition = response.data.competition;
this.competitionHasRanking = response.data.competition.has_ranking;
this.competitionHasResults = response.data.competition.has_results;
this.competitionHasCalendar = response.data.competition.has_calendar;
},
error => {
console.log(error);
});
resolve();
});
}
ionViewDidEnter() {
setTimeout(() => {
let element = document.querySelectorAll('.ion-ios-competition-custom');
let parent = element[0].parentNode;
element[0].parentNode.removeChild(element[0]);
let img = document.createElement("img");
img.setAttribute("class", "tab-icon-custom tab-button-icon icon icon-ios");
img.setAttribute("src", this.competition.fullLogo);
parent.insertBefore(img, parent.firstChild);
}, 500)
}
<ion-tabs>
<ion-tab [root]="competitionTabHome" [rootParams]="{'id': navParams.get('id')}" tabTitle="{{ name }}" tabIcon="competition-custom"></ion-tab>
<ion-tab [root]="competitionTabCalendar" [rootParams]="{'id': navParams.get('id')}" tabTitle="Calendrier" tabIcon="calendar" showWhen="competitionHasCalendar"></ion-tab>
<ion-tab [root]="competitionTabResults" [rootParams]="{'id': navParams.get('id')}" tabTitle="Résultats" tabIcon="microphone" showWhen="competitionHasResults"></ion-tab>
<ion-tab [root]="competitionTabRanking" [rootParams]="{'id': navParams.get('id')}" tabTitle="Classement" tabIcon="list-box" showWhen="competitionHasRanking"></ion-tab>
</ion-tabs>
And CompetitionPage :
ionViewCanEnter() {
return new Promise((resolve) => {
this.competitionProvider.get(this.navParams.get('id')).subscribe(response => {
this.competition = response.data.competition;
this.teams = response.data.teams;
this.stats = response.data.stats;
this.loaded = true;
});
resolve();
});
}
ionViewDidEnter() {
if( this.articles == null ) {
this.competitionProvider.articles(this.navParams.get('id')).subscribe(response => {
this.page = response.articles.page;
this.articles = response.articles.articles;
});
}
}
I’ve tried to add loaded var for check the data, but it doesn’t appear with it, only without it.
Anybody have a solution for this problem ?
Thanks you,
PS : Excuse my english.