在给定两个离子工具栏的情况下，我如何一次只选择一个离子分段按钮？

编程问答 2022-06-07

问题描述

起亚·奥拉（Kia Ora），我有一个使用离子段和离子段按钮的选项卡界面，其中包含三个段。选择了简档选项卡时，主标签下方的另一选项卡被示为具有两个离子片段。我的问题是选择的配置文件选项卡时我只想要一个离子段按钮选中（高亮显示），但不管我怎么努力总有两种图标在同一时间检查。

HTML 

<ion-header mode="md">
  <ion-toolbar mode="md">
    <ion-segment (ionChange)="segmentChanged($event)">
      <ion-segment-button *ngFor="let item of data" [value]=item.title [checked]="item.title === segmentButtonTitle"
        mode="md">
        <ion-icon src="{{item.url}}" ></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
  <ion-toolbar mode="md" *ngIf="segmentButton === 'chatbubbles'">
    <ion-segment (ionChange)="segmentButtonClicked($event)">
      <ion-segment-button checked= "segmentButtonTitle" value="message" mode="md" >
        <ion-icon name="chatbubbles" ></ion-icon>
      </ion-segment-button>
      <ion-segment-button checked = "segmentButtonTitle" value="Feed" mode="md">
        <ion-icon name="cafe" ></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
  <ion-toolbar mode="md" *ngIf="segmentButton === 'contact'">
    <ion-segment (ionChange)="segmentButtonClicked($event)">
      <ion-segment-button checked = "segmentButtonTitle" value="message" mode="md" >
        <ion-icon name="create" ></ion-icon>
      </ion-segment-button>
      <ion-segment-button checked = "segmentButtonTitle" value="Feed" mode="md">
        <ion-icon name="settings" ></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>
<ion-content *ngIf="segmentButton === 'contact'">
  <app-contacts></app-contacts>
</ion-content>
<ion-content *ngIf="segmentButton === 'flame'">
  <div *ngIf="!hasUserData || !cards.length" class="nodataDiv" padding>
    <ion-avatar>
      <ion-img src="../../assets/chat/chat4.jpg"></ion-img>
    </ion-avatar>
    <h3 class="text-center neutra font-caps red" style="font-weight: bolder;">
      {{ cards.length ? 'We are looking for people around you' : 'There are no prospecs around you' }}
    </h3>
  </div>
  <ion-content padding>

TS 

  segmentButtonClicked(event: any) {
    this.subSegmentButton = event.detail.value;
    this.segmentButtonTitle = event.detail.value;;
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularionic3ionic3