【发布时间】：2019-12-12 23:16:45
【问题描述】：
Ionic4 无线电组在动态更改无线电组列表值时行为不端。
让我们以我的用例为例，我有一个字段国家（离子选择），其中包含国家列表。另一个名为 state (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);
}
}
我的预期行为是，在频繁更改国家/地区值后，只需单击一下无线电组即可正常工作
请观看视频的结尾，您可以理解我的问题。点击here观看视频
【问题讨论】：
标签： ionic-framework ionic4 radio-group