Ionic中如何在点击按钮时提交选中的Radio button值

问题定位 #

你当前的代码存在两处缺陷导致无法正确传递选中的单选按钮值：

• 单选框没有添加相同的name属性实现分组，用户可同时选中多个选项，也没有绑定变量存储选中值
• 提交按钮不在*ngFor的循环作用域内，直接传递store属于访问不存在的局部变量，根本无法拿到选中的门店数据

修复步骤 #

1. 首先在对应的TS组件中声明变量，用于存储用户选中的门店数据：

// 组件类中新增变量，可将any替换为你store对象的实际类型
selectedStore: any = null;

2. 替换原有模板代码，给单选框分组并绑定选中变量，提交时直接传递绑定的变量即可：

<!--Starts Location Select Popover -->
<ion-list>
  <ion-list-header>
    <h5> Select Location</h5>
  </ion-list-header>
  <ion-item *ngFor="let store of storeLocations">
    <ion-label>{{store?.storeName}}</ion-label>
    <input type="radio" slot="end" name="locationGroup" [value]="store" [(ngModel)]="selectedStore" />
  </ion-item>
  <ion-button expand="block" (click)="dismissLocationSelectPopover(selectedStore)">Submit Location
  </ion-button>
</ion-list>
<!--Ends Location Select Popover -->

注意：如果你的项目中使用的是Angular响应式表单，把[(ngModel)]替换为对应FormControl的绑定即可，逻辑完全一致

内容的提问来源于stack exchange，提问作者Gokul P P