Radio group not working properly when changing the radio group list values frequently in ionic 4

Question

Ionic4 radio group misbehaving while changing the radio group list values dynamically.

Let's take my use case, I have one field country (ion-select) which has a list of countries. Another field called state (ion-radio-group) this will be visible the value based on the country selection. States will be showing fine based on the country selection but the issue is when I click the radio group it will not react in the UI. When I do doubt click the selection will be reflected in the radio group. Why it is not reflected in my first click. Please guide me.

homepage.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-item>
    <ion-label>Country</ion-label>
    <ion-select interface="popover" [(ngModel)]="selectedCountry['result']" (ionChange)="changeCountryCallback()">
      <ion-select-option *ngFor="let country of pickListValues['country']" value="{{country.choiceValue}}"
        [selected]=false>
        {{country.choice}}
      </ion-select-option>
    </ion-select>
  </ion-item>

  <ion-item *ngIf="selectedCountry['result'] != ''">
    <ion-row>
      <ion-label>State</ion-label>
    </ion-row>
    <ion-row>
      <ion-list lines="none">
        <ion-radio-group (ionChange)="changeStateCallback()" [(ngModel)]="selectedState">
          <ion-item *ngFor="let state of selectedCountry['state']">
            <ion-label>{{state.choice}}</ion-label>
            <ion-radio slot="start" value="{{state.choiceValue}}" [checked]="false"></ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-list>
    </ion-row>
  </ion-item>
</ion-content>

homepage.ts

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.html',
  styleUrls: ['./homepage.scss'],
})
export class homepage implements OnInit {
  private pickListValues = {
    country: [{
      choiceValue: "in",
      choice: "India",
      child: {
        value: [{
          choiceValue: "tn",
          choice: "Tamilnadu",
          child: {
            value: []
          }
        }, {
          choiceValue: "dl",
          choice: "Delhi",
          child: {
            value: []
          }
        }, {
          choiceValue: "mi",
          choice: "Mumbai",
          child: {
            value: []
          }
        }]
      }
    }, {
      choiceValue: "ci",
      choice: "China",
      child: {
        value: [{
          choiceValue: "AH",
          choice: "Anhui Province",
          child: {
            value: []
          }
        }, {
          choiceValue: "GX",
          choice: "Guangxi Zhuang",
          child: {
            value: []
          }
        }]
      }
    }, {
      choiceValue: "jp",
      choice: "Japan",
      child: {
        value: [{
          choiceValue: "gu",
          choice: "Gunma",
          child: {
            value: []
          }
        }, {
          choiceValue: "kw",
          choice: "Kanagawa",
          child: {
            value: []
          }
        }, {
          choiceValue: "oki",
          choice: "Okinawa",
          child: {
            value: []
          }
        }, {
          choiceValue: "tok",
          choice: "Tokushima",
          child: {
            value: []
          }
        }]
      }
    }]
  }
  selectedCountry = {
    result: "",
    state: []
  }
  selectedState: any;
  constructor() {
  }

  ngOnInit() {
  }

  changeCountryCallback() {
    console.log("Country Value : ", this.selectedCountry['result']);
    this.pickListValues['country'].forEach(element => {
      console.log("Element : ", element);
      if (element['choiceValue'] == this.selectedCountry['result']) {
        this.selectedCountry['state'] = [];
        this.selectedCountry['state'] = element['child']['value'];
      }
    })
  }
  changeStateCallback() {
    console.log("State Value : ", this.selectedState);
  }
}

My expected behavior is the radio group to be working fine with a single click after changing the country values frequently

Please watch up to end of the video you can understand my issue. Click here for video

Answer 1

<ion-content>
    <ion-item>
      <ion-label>Country</ion-label>
      <ion-select interface="popover" [(ngModel)]="selectedCountry['result']" (ionChange)="changeCountryCallback()">
        <ion-select-option *ngFor="let country of pickListValues['country']" value="{{country.choiceValue}}" [selected]=false>
          {{country.choice}}
        </ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item *ngIf="selectedCountry['result'] != ''">
      <ion-row>
        <ion-label>State</ion-label>
      </ion-row>
      <ion-row>
        <ion-list lines="none">
          <ion-radio-group (ionChange)="changeStateCallback()" [(ngModel)]="selectedState">
            <ion-item *ngFor="let state of selectedCountry['state']">
              <ion-label>{{state.choice}}</ion-label>
              <ion-radio slot="start" value="{{state.choiceValue}}" [checked]="selectedState==state.choiceValue"></ion-radio>
            </ion-item>
          </ion-radio-group>
        </ion-list>
      </ion-row>
    </ion-item>
  </ion-content>

You can accomplish by the above mentioned way([checked]="selectedState==state.choiceValue"). Here I checked which one is selected from the passed array. So on the first click, it should be working fine. Please try it and share the feedback.

Answer 2

  <div>
      <ion-label class="heading">Gender</ion-label>
      <div *ngFor='let gend of gen'>\\ gen have my details

        <ion-radio-group [(ngModel)]="register.Gender" [ngModelOptions]="{standalone: true}"> 
          <ion-row style='margin-top:10px'>
            <ion-col size='10'>
              <ion-label style='color: #b4b4b4;margin:0 0 0 40px'> {{gend.name}}</ion-label>
            </ion-col>
            <ion-col size='2'>
              <ion-radio [value]="gend.name"></ion-radio>\\value bind to ngModel
            </ion-col>
          </ion-row>
        </ion-radio-group>

      </div>
    </div>