离子版3段按钮绑定错误

Question

离子版本3段按钮绑定错误。

更新

注意：当我们在单页中使用两对离子段时发生这种情况。 如果我删除了一个正常按钮 - 另一个按预期工作。

我们不能在一个页面中使用两个“离子段”吗？

任何人都可以在两个步骤中重复错误：

CASE - 1：

1。点击第二个按钮（PHONE）。

2。再次点击第一个按钮（EMAIL）。

CASE - 2：

1。点击第一个按钮（EMAIL）。

然后，它会显示所选的按钮。

分段按钮（英语/हिन्दी）

也会发生同样的事情

A）演示：检查链接[https://youtu.be/aJ30P0d3RuM]

B）CODE SNIPPET

<ion-content padding class="login-content-wrap">
	<div *ngIf="isSignin" class="login-content-inner">
		<h2 text-center padding margin-top margin-bottom>
			<strong>{{ "WELCOME-TO-CYS" | translate }}</strong>
		</h2>
		
		<ion-buttons  text-center margin-top>
			<button ion-button outline padding full 
				(click)="redirectToUserMenuPage(user.email, user.phoneNumber)">
				{{ "LOGIN-PAGE.OPEN-MENU" | translate }}
			</button>
		</ion-buttons>
		
		<ion-buttons  text-center margin-top>
			<button ion-button outline padding full 
				id="sign-out-button" 
				(click)="signout()">
				{{ "LOGIN-PAGE.LOGOUT" | translate }}
			</button>
		</ion-buttons>
	</div>
	
	<div *ngIf="!isSignin" class="login-content-inner">
		<h2 text-center padding margin-top margin-bottom>
			<strong>{{ "LOGIN-PAGE.LOGIN" | translate }}</strong>
		</h2>
		
		<div padding>
			<ion-segment [(ngModel)]="loginWith" color="dark">
				<ion-segment-button value="email">
					{{ "LOGIN-PAGE.EMAIL" | translate }}
				</ion-segment-button>
				<ion-segment-button value="phone">
					{{ "LOGIN-PAGE.PHONE" | translate }}
				</ion-segment-button>
			</ion-segment>
		</div>
		
		<div [ngSwitch]="loginWith">
			<ion-list *ngSwitchCase="'phone'">
				<ion-item>
					<ion-label stacked>{{ "LOGIN-PAGE.PHONE-NUMBER" | translate }}</ion-label>
					<ion-input type="number" [(ngModel)]="phoneNumber" 
						 placeholder='{{ "LOGIN-PAGE.ENTER-10-DIGIT-PHONE-NUMBER" | translate }}' max="10"></ion-input>
				</ion-item>
				
				<div margin-top id="recaptcha-container"></div>
				
				<ion-buttons  text-center margin-top>
					<button ion-button outline padding full
						[disabled]="true"
						id="sign-in-button" 
						(click)="signInNew(phoneNumber)">
						{{ "LOGIN-PAGE.LOGIN" | translate }}
					</button>
				</ion-buttons>
			</ion-list>
			<ion-list *ngSwitchCase="'email'">
				<form [formGroup]="loginForm" (submit)="loginUser()" novalidate>
				
					<ion-item>
						<ion-label stacked>{{ "LOGIN-PAGE.EMAIL" | translate }}</ion-label>
						<ion-input formControlName="email" type="email" placeholder='{{ "LOGIN-PAGE.ENTER-EMAIL-ADDRESS" | translate }}'
							[class.invalid]="!loginForm.controls.email.valid && loginForm.controls.email.dirty"></ion-input>
					</ion-item>
					<ion-item class="error-message" 
						*ngIf="!loginForm.controls.email.valid  && loginForm.controls.email.dirty">
						<p>{{ "LOGIN-PAGE.PLEASE-ENTER-A-VALID-EMAIL" | translate }}</p>
					</ion-item>
					
					<ion-item>
						<ion-label stacked>{{ "LOGIN-PAGE.PASSWORD" | translate }}</ion-label>
						<ion-input formControlName="password" type="password" placeholder='{{ "LOGIN-PAGE.ENTER-PASSWORD" | translate }}' 
							[class.invalid]="!loginForm.controls.password.valid && loginForm.controls.password.dirty"></ion-input>
					</ion-item>
					<ion-item class="error-message" 
						*ngIf="!loginForm.controls.password.valid  && loginForm.controls.password.dirty">
						<p>{{ "LOGIN-PAGE.PASSWORD-ERROR-MASSAGE" | translate }}.</p>
					</ion-item>
					
					<button ion-button block type="submit" [disabled]="!loginForm.valid">
						{{ "LOGIN-PAGE.LOGIN" | translate }}
					</button>
				</form>
				<button ion-button block clear (click)="goToSignup()">
						{{ "LOGIN-PAGE.CREATE-A-NEW-ACCOUNT" | translate }}
				</button>
				
				<button ion-button block clear (click)="goToResetPassword()">
						{{ "LOGIN-PAGE.I-FORGOT-MY-PASSWORD" | translate }}
				</button>
			</ion-list>
		</div>
	</div>
</ion-content>
<ion-footer>
	<div padding-bottom padding-left padding-right>
		<ion-segment [(ngModel)]="language" color="dark">
			<ion-segment-button value='en' (click)="translateTo('en')">
				English
			</ion-segment-button>
			<ion-segment-button value='hi' (click)="translateTo('hi')">
				हिन्दी
			</ion-segment-button>
		</ion-segment>
	</div>
</ion-footer>