Problem when create dynamic tab


#1

Hi all,

I’m new with ionic, and I would like to create a dynamic tab with dynamic data.
my HTML looks like:

<ion-tabs #ionTabs>
    <ion-tab
      [root]="tabAll"
      tabTitle="All"
    ></ion-tab>
    <ion-tab
      *ngFor="let tab of tabs"
      [root]="tabContent"
      [rootParams]="rootParams"
      [tabTitle]="tab.title"
    ></ion-tab>
  </ion-tabs>

the “tabs” in the ion-tab is gotten from Rx.js in ionViewDidEnter, e.g.

Rx.Observable
                .combineLatest(a, b, c)
                .debounceTime(500)
                .subscribe(v => {
                   // return this.tabs
                })
Note that a, b, c got from ngRedux

I want to let the content of tabContent render the data from the rootParams.
The length of “this.tabs” is correct,
but when get tabs data using

@ViewChild("ionTabs") ts: Tabs;

this.ts.length would become wrong (the length this.ts._tabs will be x2 or more, for example, if this.tabs.length should be 5, then this.ts._tabs.length will become 10 but not 5), and will show error Cannot read property 'length' of null when clicks other tabs

Could anyone help me? :’(
Thank you so much!