Ionic-tabs data is not shown after loading from backend

Ionic Framework ionic-v3
1

Hello,

I am loading data from backend which takes a while for fetching.
The problem is that the data will not be shown on the initial selected tab (here allPage) after loading.
Only when I switch between the tabs the data will be displayed.
The passed parameters are initialized in “readPersonInfo”.

Here is my code from TabPage

  ngOnInit() {
    this.readPersonInfo();
  }

<ion-tabs selectedIndex="0">
  <ion-tab [root]="allPage" [rootParams]="allParameters" tabTitle="All"></ion-tab>
  <ion-tab [root]="menPage" [rootParams]="menParameters" tabTitle="Men"></ion-tab>
  <ion-tab [root]="womenPage" [rootParams]="womenParameters" tabTitle="Women"></ion-tab>
</ion-tabs>

Here is the code from nested Pages “AllPage”

  ionViewWillEnter() {
    this.info= this.navParams.data.info;
    this.allParameters= this.navParams.data.parameters;
  }

The allParameters are not shown on initial tab.
The problem is presumably that the data are passed to the nested page whereby the backend data will not be arrived at this time.

2

Should I reload the page?

3

You use [rootParams]=“allParameters”

and then this.navParams.data.parameters.

I think this didn´t match.

Try console.log(this.navParams.data) to see how the data you sends looks like.

4

the passed parameter is an object

5

Here is a example from my project.

I send this data

this.data = {
      chatroom: this.navParams.get('chatroom'),
      viewCtrl: this.viewCtrl
    }

through the route param

<ion-tab [tabsHideOnSubPages]="true" [root]="tab1Root" [rootParams]="data" tabTitle="Allgemein" tabIcon="settings">
</ion-tab>

And here I retrieve it

this.chatroom = this.navParams.get('chatroom');
this.viewCtrl = this.navParams.get('viewCtrl');
6

The problem is either that the tab was initialized before the data is back from backend.
When I initially select the second tab and after the data was retrieved, selected the first tab it works.

<ion-tabs #tabs selectedIndex="2">

and after the data was retrieved

this.tabRef.select(0);
7

You shoud put all your api calls in a provider and import this in every page you need the data.

This shoud solve your problem.

8

yeah, I made it so. But the data is loaded once in the TabPage and not in the nested pages.The TabPage passes the data to the nested pages through the passedParams.
The info which is needed in the nested pages are in the one backend call. Then the returned object ist sorted for the type men and women.

9

But why do you pass the data as param?

If you include the provider in the nested page you can make the api call there in the ionViewWillEnter() for example.

10

Because the backend call is the same for all tabs and I want that the call was made once.

11

Ok then try this.

in your provider


import { Subject } from 'rxjs/Subject';

public newAllParameters = new Subject();

Add this to your api call in your provider

this.newAllParameters.next(allParameter) // sends allParameters to all subscribers

In your nested page(s).

yourApiProvider.newAllParameters.subscribe((allParameter) => {
        this.allParameter = allParameter;
    });