Ionic framework 在ionic 4中频繁更改无线电组列表值时,无线电组工作不正常

Ionic framework 在ionic 4中频繁更改无线电组列表值时,无线电组工作不正常,ionic-framework,ionic4,radio-group,Ionic Framework,Ionic4,Radio Group,Ionic4无线组在动态更改无线组列表值时行为异常 让我们以我的用例为例,我有一个field country(离子选择),它有一个国家列表。另一个名为state(离子无线电组)的字段将显示基于国家/地区选择的值。各州将根据国家选择显示良好,但问题是当我单击无线电组时,它不会在UI中做出反应。当我不确定单击时,选择将反映在收音机组中。为什么它没有反映在我的第一次点击。请引导我 homepage.html <ion-header> <ion-toolbar color="pri

Ionic4无线组在动态更改无线组列表值时行为异常

让我们以我的用例为例,我有一个field country(离子选择),它有一个国家列表。另一个名为state(离子无线电组)的字段将显示基于国家/地区选择的值。各州将根据国家选择显示良好,但问题是当我单击无线电组时,它不会在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>
我的预期行为是,在频繁更改国家/地区值后,广播组只需单击一下即可正常工作

请观看视频的最后部分,您可以理解我的问题。点击查看视频


  <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>
性别 \\你有我的详细资料吗 {{gend.name} \\绑定到ngModel的值

国
{{country.choice}
状态
{{state.choice}
您可以通过上述方式完成([checked]=“selectedState==state.choiceValue”)。在这里,我检查了从传递的数组中选择的一个。因此,在第一次单击时,它应该可以正常工作。请尝试并分享反馈

  <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>
<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>