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

Question

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

编辑
我在默认屏幕上检查了女性，每当我第一次单击男性单选按钮时，该值将变为 true，并且在第 3 次尝试时，将检查男性而不取消选中女性...

.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]的elements属性，根据data.sex的值动态检查ion-radio。

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>

Show result