Javascript 如何在离子无线电元件上使用ngModel?
我试图在一个离子无线电元件上实现一个NGM模型,但不知何故它不起作用。这是我的代码:Javascript 如何在离子无线电元件上使用ngModel?,javascript,ionic-framework,angular,ecmascript-6,ionic2,Javascript,Ionic Framework,Angular,Ecmascript 6,Ionic2,我试图在一个离子无线电元件上实现一个NGM模型,但不知何故它不起作用。这是我的代码: 导入{ 页 }从“离子角度”; @页面({ templateUrl:'build/pages/settings/settings.html' }) 导出类设置{ 构造函数(){ 这个单位=2; } } 单位 公制(千克) 帝国(磅) 语法已更改,现在重写,ngModel应与离子列表&无线电组一起放置一次。无需在每个离子无线电元件上安装它们 <ion-list radio-group [(ngModel
导入{
页
}从“离子角度”;
@页面({
templateUrl:'build/pages/settings/settings.html'
})
导出类设置{
构造函数(){
这个单位=2;
}
}
单位
公制(千克)
帝国(磅)
语法已更改,现在重写,ngModel
应与离子列表
&无线电组一起放置一次。无需在每个离子无线电
元件上安装它们
<ion-list radio-group [(ngModel)]="unit">
<ion-list-header>
Unit
</ion-list-header>
<ion-item>
<ion-label>Metric (kg)</ion-label>
<ion-radio value="1"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Imperial (lbs)</ion-label>
<ion-radio value="2" ></ion-radio>
</ion-item>
</ion-list>
单位
公制(千克)
帝国(磅)
有关更多信息,您可以访问ionic2框架这在Ionic 5上对我很有用
<ion-radio-group name="iconSelect" ngDefaultControl [(ngModel)]="playerIcon" (ionChange)="setIcon()">
<ion-list-header>
</ion-list-header>
<ion-item>
<ion-label>
<ion-icon name="radio-button-off"></ion-icon>
Circle
</ion-label>
<ion-radio value="1" ></ion-radio>
</ion-item>
<ion-item>
<ion-label>
<ion-icon name="square-outline"></ion-icon>
Square
</ion-label>
<ion-radio value="2"></ion-radio>
</ion-item>
<ion-item>
<ion-label>
<ion-icon name="play"></ion-icon>
Triangle
</ion-label>
<ion-radio value="3" ></ion-radio>
</ion-item>
</ion-radio-group>
圆圈
广场
三角
它正在使用离子5
<ion-radio-group value="answer">
<ion-item *ngFor="let item of question?.answers">
<ion-label> {{item.answer}} {{answer}}</ion-label>
<ion-radio slot="start" color="tertiary" value="{{item.id}}
(ionBlur)="saveAnswer(item.id)">
</ion-radio>
</ion-item>
</ion-radio-group>
{{item.answer}{{answer}
在爱奥尼亚5中,您也必须更新以下代码
this.unit = 2;
到
总之,不能将整数变量用作离子无线电值
如果您要使用整型装置,请参考以下代码
this.options = [
{
label: 'Metric (kg)',
value: 1
},
{
label: 'Imperial (lbs)',
value: 2
}
];
in.html代码
<ion-radio-group [(ngModel)]="unit">
<ion-list-header>
<ion-label>
Unit
</ion-label>
</ion-list-header>
<ion-item *ngFor="let opt of options">
<ion-label>{{opt.label}}</ion-label>
<ion-radio [value]="opt.value" slot="start"></ion-radio>
</ion-item>
</ion-radio-group>
单位
{{opt.label}
从Ionic 4+开始,正确的sintax为:
<ion-list>
<ion-radio-group [(ngModel)]="unit">
<ion-list-header>
Unit
</ion-list-header>
<ion-item>
<ion-label>Metric (kg)</ion-label>
<ion-radio value="1"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Imperial (lbs)</ion-label>
<ion-radio value="2"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
单位
公制(千克)
帝国(磅)
这就是爱奥尼亚5的工作原理。经过测试,工作正常
<ion-list>
<ion-radio-group >
<ion-list-header>
<ion-label>{{'Drivers' | translate}}</ion-label>
</ion-list-header>
<ion-item *ngFor="let item of drivers" lines="none" (ionChange)="checkValue(item)">
<ion-avatar slot="start">
<img [src]="item.coverImage" />
</ion-avatar>
<ion-label>{{item.fullname}} <br>
<p>{{'Distance' | translate}} : {{item.distance}}Km</p>
</ion-label>
<ion-radio [value]="item.id"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
{{'Drivers'| translate}}
{{item.fullname}}
{{'Distance'| translate}}:{{{item.Distance}}Km
然后在你的控制器中,你可以像这样选择它
校验值(值){
console.log(“返回”,值)
}这对我有用
postData={
"gender":''
}
性别
男性
女性
这对爱奥尼亚4仍然有效。谢谢对离子4不再有效。@Jouke谢谢提醒。如果你能分享一个链接让它工作,那就太好了。在离子4+中,这需要你能解释一下你是怎么做到的吗?
postData={
"gender":''
<ion-list>
<ion-radio-group value="Male" >
<ion-list-header>
<ion-label style="font-size:10px;">Gender</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Male</ion-label>
<ion-radio slot="start" value="Male" (ionBlur)="postData.gender='Male'"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Female</ion-label>
<ion-radio slot="start" value="Female" (ionBlur)="postData.gender='Female'"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>