ionic4.x表单组件ion-radio ion-radio-group双休数据绑定
ionic4.x中给我们提供了很多常见的表单相关的UI组件,下面给大家看一个比较特殊的 ion-radio。以及获取 ion-radio的值。
ion-radio和Angular中的radio双休数据绑定还是有些区别的。
在ionic4.x中ion-radio 必须被ion-radio-group包裹然后组成按钮组。
给ion-radio 没法直接进行双休数据绑定。按钮组需要给ion-radio-group进行双休数据绑定
代码如下:
<ion-list>
<ion-radio-group [(ngModel)]="peopleInfo.payType">
<ion-item>
<ion-avatar slot="start">
<img src="assets/alipay.png">
</ion-avatar>
<ion-label>支付宝</ion-label>
<ion-radio value='1' slot="end"></ion-radio>
</ion-item>
<ion-item>
<ion-avatar slot="start">
<img src="assets/weixinpay.png">
</ion-avatar>
<ion-label>微信</ion-label>
<ion-radio value='2' slot="end"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>