Question

我的tabs.ts（简化） - 用于生成带有* ngFor的标签的数据来自php后端：

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() {
            //  }

        }
    }

结果是不可见的标签。但当您将鼠标悬停在鼠标上时，光标会变为“手”状态。你可以点击它们。单击时，整个选项卡栏将变为可见，并且所有选项卡都按预期工作。

当我使用@ViewChild来引用标签元素时，有趣的是它的长度为＆＃39; property始终为0（我在ionViewDidLoad事件中检查过）。试图以编程方式选择其中一个选项卡也会失败 - 它们就像鬼一样;）

此外，当您在模板中的* ngFor个旁边放置至少一个静态标签时，所有* ngFor显示，但无论您以编程方式选择还是在selectedIndex属性中，都会始终选择静态在标签元素上。

任何想法的人？我已经浪费了三天......

Answer 1

这是一个已知的错误，看看元素css，子视图的.tabbar的不透明度为0.我只是用不透明的覆盖来修复它：1。丑陋，但有效......

Answer 2

从observable（动态）创建ion-tab有一些错误（重复，错误呈现等）我使用一种解决方法来避免它，它包括每次删除和加载ion-tabs运行时然后可观察到的更改。

父模板：

<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

我在开发过程中遇到了类似的问题，我可以通过使用ngOninit异步并调用超时来设置所选标签来解决这个问题。

视图

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

1）ngOninit是异步

2）this.ctrlPanelTabs.select（0）;在超时函数中设置

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..");
            });
    }

}

Ionic2 - 隐形标签 - 从可观察的

3 个答案: