在ionic 4中动态选择单选按钮

Question

我有一个模式，我有数据要从父页面填充。在模式中，我有性别的组单选按钮，我很难从我的数据中检查正确的性别以及如何获得更改性别

编辑
我正在检查默认屏幕上的女性，每当我第一次单击男性单选按钮时，该值将更改为 true，第三次尝试时，将检查男性，而不会取消选中女性...

.ts

public data: any = {
  sex: 'Male',
};

HTML

<ion-radio-group>
  <!-- <ion-item> -->
    <ion-radio value="Female"  [(ngModel)]="data.sex" [checked]="this.data.sex==='Female'" name="sex" id="male" id="female"></ion-radio>
          &nbsp;&nbsp;
      <ion-label for="female">Female</ion-label>
          &nbsp;&nbsp;
    <ion-radio value="Male"  [(ngModel)]="data.sex"  name="sex" [checked]="this.data.sex==='Male'" id="male"></ion-radio> &nbsp;&nbsp;
      <ion-label for="male">Male</ion-label>
  <!-- </ion-item> -->
</ion-radio-group>

Answer 1

我尝试不同的方法来解决您的问题。[(ngModel)]我没有使用双向数据绑定，而是使用(ionChange)了 EventEmitter。

(ionChange)将检测任何更改并将事件传递给onChangeHandler($event). 每次触发函数时，将提取事件中的值替换对象中的值data.sex。

最后，属性绑定用于直接访问元素属性，[checked]以ion-radio根据data.sex值动态检查。

TS

  public data: any = {
    sex: 'Male'
  };


  onChangeHandler($event) {
    this.data.sex = $event.target.value;
  }

HTML

  <ion-radio-group (ionChange)="onChangeHandler($event)">
    <ion-item>
      <ion-label>Male</ion-label>
      <ion-radio value="Male" [checked]="this.data.sex==='Male'"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Female</ion-label>
      <ion-radio value="Female" [checked]="this.data.sex==='Female'"></ion-radio>
    </ion-item>
  </ion-radio-group>
  <p>{{this.data.sex}}</p>

显示结果