在离子4中经常更改无线电组列表值时，无线电组无法正常工作

Question

ionic4无线电组在动态更改无线电组列表值时行为不当。

让我们使用我的用例，我有一个野外国家(离子选择(，其中有一个国家/地区。另一个称为状态(ION-RADIO-group(的字段，根据国家选择，这将是可见的值。根据国家的选择，各州将表现良好，但问题是当我单击无线电组时，它不会在UI中做出反应。当我疑问时，单击时，选择将反映在无线电组中。为什么在我的第一次点击中不反映它。请引导我。

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);
  }
}

我的预期行为是无线电组经常更改国家价值后单击

，可以通过单击 进行正常工作。

请注意视频的结尾，您可以理解我的问题。单击此处以获取视频

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>

您可以通过上述方式完成( [checked] =" selectedstate == state.choicevalue" (。在这里，我检查了从传递数组中选择哪个。因此，在第一次点击时，它应该可以正常工作。请尝试并分享反馈。

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>