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

Question

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

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

.ts

Singleton

HTML

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

Answer 1

对于您的问题，我尝试使用其他方法。我没有使用双向数据绑定[(ngModel)]，而是使用了(ionChange)这是一个EventEmitter。

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

最后，使用属性绑定直接访问[checked]的elements属性，以基于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>

Show result