如何使用Angular动态实现单选按钮每次仅选中一个的互斥效果

原因：Ionic的ion-radio组件默认单独使用时不会互斥，必须嵌套在ion-radio-group组件内，同组内的单选按钮才会实现同一时间仅选中一个的效果。

修复步骤 #

• 在渲染这些单选按钮的列表父级外层添加ion-radio-group组件，绑定一个变量用来存储当前选中的值
• 保持原有ion-radio的[value]绑定不变即可

修复后代码示例 #

<!-- 外层添加ion-radio-group，绑定存储选中值的变量，以下示例基于Angular框架 -->
<ion-radio-group [(ngModel)]="selectedNodeId">
  <!-- 这里是你原有的循环渲染逻辑，替换成你自己的循环变量即可 -->
  <tr *ngFor="let arc of nodeList">
    <td class="ci-prim-para ci-txt-left ci-p-5 width40">
       <p class="ci-pr-5">{{arc.node_value}}</p>
    </td>
    <td class="ci-prim-para ci-txt-left ci-p-5 width15">
      <ion-radio color="tertiary" slot="start" [value]="arc.node_id"></ion-radio>
    </td>
  </tr>
</ion-radio-group>

说明：你需要在对应的ts文件中定义selectedNodeId变量用来接收选中的节点ID，nodeList替换为你实际循环的数据源变量名即可。

内容的提问来源于stack exchange，提问作者shirish lakhe