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

Question

Ionic4 无线电组在动态更改无线电组列表值时出现异常。

让我们以我的用例为例，我有一个字段国家 (ion-select)，其中有一个国家列表。另一个名为 state (ion-radio-group) 的字段将显示基于国家 selection 的值。各州将根据国家 selection 显示正常，但问题是当我单击无线电组时它不会在 UI 中做出反应。当我怀疑点击 selection 时，将反映在 radio 组中。为什么它没有反映在我的第一次点击中。请指导我。

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

我的预期行为是无线电组在频繁更改国家/地区值后单击即可正常工作

请看完视频你能明白我的问题。点击here观看视频

Answer 1

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

Answer 2

<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")。这里我检查了从传递的数组中选择了哪一个。所以在第一次点击时，它应该工作正常。请尝试并分享反馈。

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

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

radio-group

ionic-framework

ionic4