如何解决在给定两个离子工具栏的情况下,我如何一次只选择一个离子分段按钮?
起亚·奥拉(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 举报,一经查实,本站将立刻删除。