我有一些代码可以根据表达式动态选择一个单选按钮,但问题是它有时会选择一个单选组列表的两个单选按钮,即html代码。
<ion-row>
<ion-col col-4 no-padding class="one">
<ion-item>
<ion-label>
<img src="assets/imgs/nearby/male.png"> Male</ion-label>
<ion-radio [checked]="this.gender === 'Male'" value="Male" (ionSelect)="selectGender('Male')"></ion-radio>
</ion-item>
</ion-col>
<ion-col col-5 no-padding class="two">
<ion-item>
<ion-label>
<img src="assets/imgs/nearby/female.png"> Female</ion-label>
<ion-radio [checked]="this.gender === 'Female'" value="Female" (ionSelect)="selectGender('Female')"></ion-radio>
</ion-item>
</ion-col>
<ion-col col-3 no-padding class="third">
<ion-item>
<ion-label>
<img src="assets/imgs/nearby/all-mf.png"> All</ion-label>
<ion-radio [checked]="this.gender === 'all'" value="all" (ionSelect)="selectGender('all')"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
其中的selectGender方法是
selectGender(gender) {
this.gender = '';
this.gender = gender;
}
是否有更好的方法来实现这一目标?单选组所属的搜索字段和搜索结果都是同一页面的一部分,并在onSearchClicked()上隐藏和查看,该方法可以更改控制变量的查看和不查看元素的方法。
我希望与.ts文件中的性别变量值同步选择单选按钮。
答案 0 :(得分:0)
您可以执行以下操作:
gender: string = "Male";
constructor(public navCtrl: NavController) {
}
selectGender(gender) {
this.gender = gender;
}
默认情况下,您可以将性别视为“男性”,请参见示例ionic-radio-group
答案 1 :(得分:0)
我找到了一个解决方案,因为* ngIf每次都会删除并向DOM添加元素,因此绑定到隐藏属性即可解决该问题。我应该在问题中提到这一点,但应使用属性绑定而不是* ngIf。