微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

起亚·奥拉(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 举报,一经查实,本站将立刻删除。