Ionic2 - invisible tabs - when they are generated from observable

Question

My tabs.ts (simpilified) - the data used for the generated tabs using * ngFor is given from the php backend:

import ...

export interface Group {
        id: number;
        group: string;
    };

@Component( {
        template: `
    <ion-tabs #myTabs selectedIndex="0">
        <ion-tab *ngFor="let tab of userGroups" [root]="page" [rootParams]="tab.id" [tabTitle]="tab.group" tabIcon="pulse"></ion-tab>
    </ion-tabs>
    `
    })

    export class GroupsTabsPage {
        userGroups: Group[];
        page: any = TabStudentsPage; 

        constructor( public app: App, public api: Api, public navParams: NavParams ) {

            this.api.getGroupsList()
                .subscribe(
                data => {
                    this.userGroups = data;
                },
                err => {
                    this.app.getRootNav().push( LoginPage )
                }
                );

            //  ionViewDidEnter() {
            //  }

        }
    }

The result is invisible tabs. But , when you hover over them, the cursor changes to a “hand,” and you can click them. When clicked, the entire tab bar becomes visible, and everything works as expected.

When I used @ViewChild to refer to tab items, the interesting thing is that its length property is always 0 (I checked the ionViewDidLoad event). An attempt to select one of the tabs programmatically also failed - they look like ghosts;)

, * ngFor , * ngFor, , selectedIndex .

? .

Answer 1

, css, subview .tabbar 0. : 1. , ...

Answer 2

() (, ..). , , run-run run-each , .

:

<div #pluginTabContainer></div>

:

@ViewChild("pluginTabContainer", {read: ViewContainerRef}) pluginTabContainer:ViewContainerRef;

...

plugins$.subscribe((pluginTabs:Array<PluginTabType>) => { let componentFactory = this.componentFactoryResolver.resolveComponentFactory(PluginTabContainerComponent); this.pluginTabContainer.clear(); this.pluginTabContainertRef = this.pluginTabContainer.createComponent(componentFactory); this.pluginTabContainertRef.instance.data = pluginTabs;

...

ngOnDestroy() { this.pluginTabContainertRef.destroy(); }

:

<ion-tabs> <ion-tab *ngFor="let tab of data" [root]="'PluginTabPage'" [rootParams]="tab"></ion-tab> </ion-tabs>

( ):

@Input() data: PluginTabType;

, .

Answer 3

I had a similar problem during development, and I was able to solve this problem by running asynchronous ngOninit and causing a timeout to set the selected tab.

View

 <ion-tabs #ctrlPanelTabs class="tabs-basic">
        <ion-tab *ngFor="let appTab of appTabs" tabTitle={{appTab.name}} [root]="rootPage"></ion-tab>
    </ion-tabs>

1) ngOninit is async

2) this.ctrlPanelTabs.select (0); set inside the timeout function

import { Component, OnInit, ViewChild } from '@angular/core';
import { NavController, Tabs } from 'ionic-angular';
import { AppSettings } from '../../common/app.config';
import { AppTab } from '../../models/app-tab';
import { AppTabService } from '../../services/app-tab.service';
import { PanelTabComponent } from './panel-tab';

@Component({
    selector: 'page-control-panel',
    templateUrl: 'control-panel.html',
    providers: [AppTabService]
})
export class ControlPanelPage implements OnInit {

    @ViewChild("ctrlPanelTabs") ctrlPanelTabs: Tabs;

    appTabs: AppTab[] = [];
    message: string;
    rootPage = PanelTabComponent;
    constructor(public navCtrl: NavController,
        private appTabService: AppTabService) {

        console.log("Control Panel Page : Constructor called..");
    }

    async ngOnInit() {
        console.log("Control Panel Page : Entering ngOninit..");
        await this.loadAppTabs();
        setTimeout(() => {
            this.ctrlPanelTabs.select(0);
        }, 100);
        console.log("Control Panel Page : Exiting ngOninit..");
    }

    async loadAppTabs() {
        console.log("Control Panel Page : Entering loadAppTabs..");
        await this.appTabService.getAppTabsHierarchyBySlaveDeviceId(AppSettings.selSlaveDeviceId)
            .then((response: any) => {
                this.appTabs = JSON.parse(response.result);
                console.log(this.appTabs);
                console.log("Control Panel Page : Exiting loadAppTabs..");
            });
    }

}