在Ionic 3中动态选择单选按钮

Question

我有一些代码可以根据表达式动态选择单选按钮，但问题是它有时会选择单选组列表中的两个单选按钮，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(gender) {
this.gender = '';
this.gender = gender;
}

有更好的方法来实现这一点吗？哪个无线电组的搜索字段和搜索结果都是同一页面的一部分，并且在onSearchClicked((上被隐藏和查看，onSearchClickd((是一种更改变量的方法，该变量控制元素的查看和不查看。

我希望单选按钮的选择与.ts文件中性别变量的值同步。

Answer 1

您可以这样做：

gender: string = "Male";
constructor(public navCtrl: NavController) {
}
selectGender(gender) {
this.gender = gender;
} 

默认情况下，你可以将性别视为"男性"，参见离子无线电组的示例

Answer 2

我找到了一个解决方案，绑定到隐藏属性解决了这个问题，因为*ngIf每次都会向DOM中删除和添加元素。我应该在问题中提到这一点，但使用属性绑定而不是*ngIf。