Tabs refuse to appear when data loaded

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.

Can you please rewrite this so that:

  • you don’t explicitly instantiate any Promises with new
  • you never reference document or anything about the DOM directly

Hi,

You’re right !

Thanks for clarification.

Regards,
SquallX.