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

你的名字 2022-10-01 13:55 210阅读 0赞

原文出处：[https://blog.csdn.net/bigname22/article/details/79657286][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的问题查询资料还是比较少的感觉，要多翻国外的文章才行。

[https_blog.csdn.net_bigname22_article_details_79657286]: https://blog.csdn.net/bigname22/article/details/79657286

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-list-item添加点击事件click无效解决方法

uni-list-item添加点击事件click无效解决方法简介本文讲解uni-list-item添加点击事件click无效解决方法。解决方法只需要

￡神魔★判官ぃ/ 2024年03月16日 07:18/ 0 赞/ 54 阅读

相关 css添加scoped后的样式无效问题

css添加scoped后会编译出版本号 ![在这里插入图片描述][20201228181658245.png] 如果在添加scoped的style中更改UI组件库中的组

淩亂°似流年/ 2022年12月31日 06:18/ 0 赞/ 245 阅读

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

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

你的名字/ 2022年10月01日 13:55/ 0 赞/ 211 阅读

相关如何实现动态添加的元素添加点击事件

![9aa0df152e5b0a7e4af4ecc8c8ca05e7.png][] 在页面开发过程中常常遇到需要动态添加元素，然后给这一元素绑定相关事件的情况，这种情况下一般

心已赠人/ 2022年09月16日 14:25/ 0 赞/ 268 阅读

相关 TextView添加Onclick点击无效没反应解决办法

再给TextView添加Onclick事件时，发现点击无效没反应，原因是还需要配置android:clickable="true"。 <TextView

末蓝、/ 2022年08月26日 11:11/ 0 赞/ 715 阅读

相关 vue.js 实现点击后动态添加 class 并删除同级 class

<div id = "prizeReport"><div class="swiper-container"> <div class="swiper-wr

秒速五厘米/ 2022年05月30日 05:56/ 0 赞/ 409 阅读

相关动态添加的点击事件无效

动态添加checkbox按钮后点击事件无效 <div class="row cl"> <label class="form-label col-xs-4

分手后的思念是犯贱/ 2022年05月26日 08:30/ 0 赞/ 280 阅读

相关 vue 通过按钮点击动态添加组件

效果如下 ![2019051408173183.gif][] 思路 v-for循环+数组组件 -------------------- 第一步、定义一

╰半夏微凉°/ 2022年02月01日 09:41/ 1 赞/ 1382 阅读

相关 JS动态append之后点击事件无效

今天做项目用了append向HTML里面添加结构代码，代码添加之后，单击事件就没反应了。搞得我一脸懵逼，调了代码很久实在不行，我百度了一下才发现，append添加的节点单击事件

深藏阁楼爱情的钟/ 2022年01月21日 02:15/ 0 赞/ 405 阅读

相关点击按钮添加一个ListItem后控制页面的转向问题

\ 本篇用于将一些学习的东西记录下来，以免忘了，也可理解为学习笔记，高手请跳过，谢谢。一般来说我们在点击添加一个ListItem的按钮之后在URL中没有传入Sourc

谁借莪１个温暖的怀抱￠/ 2021年11月05日 16:48/ 0 赞/ 259 阅读