ion-segment动态添加后，点击无效问题

原文出处：https://blog.csdn.net/bigname22/article/details/79657286

Ionic开发遇到这样一个问题

 

<ion-segment class="tabs" [(ngModel)]="tabIndex" color="primary" (ionChange)="tabChange($event)">
    <ion-segment-button *ngFor="let tabItem of tabs;let selectIndex = index" (ionSelect)="select($event)"  value="{{selectIndex}}">
      {{tabItem.name}}
    </ion-segment-button>
  </ion-segment>

 

问题描述

当数据源tabs动态增加的选项卡时，新增的选项卡无法正常点击切换。

 

解决办法

在对数据源tabs操作之后执行如下代码：

 

setTimeout(() => {
          if(this.segment){
            this.segment.ngAfterContentInit();
          }
        }, 100);

别忘了，segment要声明的

 

@ViewChild(Segment) segment: Segment; // 这个在顶部声明...

 

另外一种解决办法

 

<ion-segment *ngIf="tabs" [(ngModel)]="businessId">
    <ion-segment-button *ngFor="let item of tabs" value="{{ item.id }}">{{ item.title }}</ion-segment-button>
</ion-segment>

国内关于Ionic的问题查询资料还是比较少的感觉，要多翻国外的文章才行。