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>