Ionic/Angular应用单选按钮双向绑定失效问题求助

我来帮你排查这个单选按钮绑定的问题！从你给出的代码片段来看，核心问题出在单选组的ngModel绑定位置错误，还有一些细节需要调整，下面一步步来解决：

问题分析 #

你现在把[(ngModel)]绑定到了单个<ion-radio>上，但Ionic的<ion-radio-group>才是管理整个单选组选中状态的容器，应该把ngModel绑定到这个容器上，单个单选按钮只需要设置value即可。

修正后的代码示例 #

HTML模板部分 #

<ion-list>
  <!-- 把ngModel绑定到radio-group上，管理整个组的选中值 -->
  <ion-radio-group [(ngModel)]="shared.card_type">
    <ion-item>
      <ion-label>Personal</ion-label>
      <!-- 只需要设置value，不需要单独绑定ngModel和checked（初始值由ngModel控制） -->
      <ion-radio value="personal" name="cardType"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Business</ion-label>
      <ion-radio value="business" name="cardType"></ion-radio>
    </ion-item>
  </ion-radio-group>
  
  <!-- 可以加个按钮测试获取选中值 -->
  <ion-button (click)="checkSelectedValue()">查看选中值</ion-button>
</ion-list>

组件类（.ts文件）部分 #

确保你在组件中正确初始化了shared对象，否则ngModel无法正常绑定：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component', // 替换成你的组件选择器
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
})
export class YourComponent {
  // 初始化shared对象，设置默认选中的card_type（和第一个radio的value对应）
  public shared = {
    card_type: 'personal'
  };

  // 测试获取选中值的方法
  checkSelectedValue() {
    console.log('当前选中的卡类型：', this.shared.card_type);
    // 这里可以直接使用this.shared.card_type拿到选中值
  }
}

关键注意事项 #

• 绑定位置正确：一定要把[(ngModel)]绑定到<ion-radio-group>，而不是单个单选按钮，这样选中项的value会自动同步到绑定的变量中。
• 初始化绑定变量：必须确保shared对象和card_type属性在组件中提前定义并初始化，否则Angular无法追踪数据变化。
• 关于checked属性：如果已经通过ngModel设置了初始值，就不需要再给单个radio加checked="true"，ngModel会自动控制选中状态。
• 旧版本兼容：如果你使用的是较旧的Ionic/Angular版本，可能需要在<ion-radio-group>上添加ngDefaultControl属性，确保ngModel能正常工作：

  <ion-radio-group [(ngModel)]="shared.card_type" ngDefaultControl>
  

按照上面的调整后，你应该就能正常获取到单选按钮的选中值啦！

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