为什么离子无线电检查值不能根据加载的数据正确设置

Question

为什么页面加载时两个单选按钮都被取消选中？

colorSchemes是一个包含2个项的数组。

<ion-radio-group (ionChange)="radioGroupChange($event)" #radioGroup>
<ion-list *ngFor="let scheme of colorSchemes; let i = index">
<ion-item class="color-scheme-item-inactive" [ngClass]="{'color-scheme-item-active': scheme.default}">
<ion-radio
name="color_radios"
value="{{scheme.code}}"
checked="{{scheme.checked}}"
></ion-radio>
<ion-label class="checkbox-label">{{scheme.name}}</ion-label>
</ion-item>
</ion-list>
</ion-radio-group>

并且这个对象存储在colorSchemes中：

[{
checked: true,
code: "Default",
default: true,
expanded: false,
name: "Default Color Scheme",
}, {
checked: false
code: "Alternate"
default: false
expanded: false
name: "Alternate Color Scheme"
}]

我本以为；默认"；单选按钮，但加载页面时未选中。

Answer 1

您需要在ion-radio-group中给定默认的选定值，然后每当您单击另一个单选按钮时，都必须像下面的代码一样设置该值。

Component.html文件

<ion-radio-group (ionChange)="radioGroupChange($event)" [(ngModel)]="selectedValue" #radioGroup>
<ion-list *ngFor="let scheme of colorSchemes; let i = index">
<ion-item class="color-scheme-item-inactive" [ngClass]="{'color-scheme-item-active': scheme.default}">
<ion-radio name="color_radios" [value]="scheme.code"></ion-radio>
<ion-label class="checkbox-label">{{scheme.name}}</ion-label>
</ion-item>
</ion-list>
</ion-radio-group>

组件.ts文件

colorSchemes = [{
checked: true,
code: "Default",
default: true,
expanded: false,
name: "Default Color Scheme",
}, {
checked: false,
code: "Alternate",
default: false,
expanded: false,
name: "Alternate Color Scheme"
}];
selectedValue = 'Default'
radioGroupChange(event) {
console.log(event.target.value);
this.selectedValue = event.target.value;
}

这个代码工作起来很有魅力，我已经试过了。

工作演示：https://stackblitz.com/edit/ionic-angular-v5-twqrf8?file=src/app/app.component.ts