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

【问题标题】：Dynamically selecting a radio button in Ionic 3在 Ionic 3 中动态选择单选按钮
【发布时间】：2018-07-16 12:57:37
【问题描述】：

我有一些代码可以根据表达式动态选择单选按钮，但问题是它有时会选择单选组列表的两个单选按钮，即 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() 上被隐藏和查看，onSearchClicked() 是一种更改控制查看和不查看元素的变量的方法。

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

【问题讨论】：

标签： angular ionic-framework ionic3

【解决方案1】：

你可以这样做：

  gender: string = "Male";

  constructor(public navCtrl: NavController) {

  }

 selectGender(gender) {
    this.gender = gender;
  }

默认您可以将性别视为“男性”，参见示例ionic-radio-group

【讨论】：

不幸的是这不起作用，它允许一次选择两个按钮，可能是由于检查和更新值的延迟
有什么问题？？

【解决方案2】：

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

【讨论】：