Angular如何基于选中的单选按钮实现货币符号与对应金额动态切换

核心需求 #

用户点击顶部的货币符号单选按钮时，需要同步完成两个联动逻辑：

• 下方金额选择区的货币符号，匹配当前选中的币种
• 可选的金额值列表，切换为对应币种配置的专属金额档位
  注：不同币种对应的可选金额档位完全独立，不通用。

实现逻辑 #

1. 组件层定义响应式数据结构 #

不要在模板里硬编码所有静态内容，把不同币种的配置抽成可维护的对象结构，方便后续调整规则：

// 组件类核心属性
selectedCurrency = 'dollar'; // 默认选中美元币种
selectedAmount: number | null = null; // 当前选中的金额值

// 全量币种配置：key为币种标识，value为对应币种的符号、可选金额档位
currencyConfigMap: Record<string, { currencySign: string; amountOptions: number[] }> = {
  lari: {
    currencySign: '₾',
    amountOptions: [100000, 200000, 300000, 500000]
  },
  dollar: {
    currencySign: '$',
    amountOptions: [250000, 500000, 750000, 1000000]
  },
  euro: {
    currencySign: '€',
    amountOptions: [200000, 400000, 600000, 800000]
  }
};

// 币种切换时的重置逻辑：清空之前选中的金额，避免跨币种值不匹配
onCurrencySwitch() {
  this.selectedAmount = null;
}

2. 模板层改造绑定逻辑 #

替换原有的纯静态HTML结构，用Angular的模板语法完成动态渲染：

• 顶部货币选择区：用ngModel双向绑定当前选中的币种值，切换时触发重置方法

<!-- 货币符号选择区 -->
<div class="currency-group">
  <input 
    type="radio" 
    id="lari" 
    name="currency" 
    value="lari"
    [(ngModel)]="selectedCurrency"
    (change)="onCurrencySwitch()">
  <label for="lari">₾</label>

  <input 
    type="radio" 
    id="dollar" 
    name="currency" 
    value="dollar"
    [(ngModel)]="selectedCurrency"
    (change)="onCurrencySwitch()">
  <label for="dollar">$</label>

  <input 
    type="radio" 
    id="euro" 
    name="currency" 
    value="euro"
    [(ngModel)]="selectedCurrency"
    (change)="onCurrencySwitch()">
  <label for="euro">€</label>
</div>

• 下方金额选择区：用ngFor循环渲染当前选中币种对应的金额档位，自动匹配显示对应的货币符号，不再硬编码静态的$符号和固定金额

<!-- 金额选择区（动态渲染） -->
<div class="amount-group">
  <ng-container *ngFor="let amount of currencyConfigMap[selectedCurrency].amountOptions">
    <input 
      type="radio" 
      [id]="amount" 
      name="amount" 
      [value]="amount"
      [(ngModel)]="selectedAmount">
    <label [for]="amount">
      <span>{{ amount / 10000 }} 0000</span>
      <span>{{ currencyConfigMap[selectedCurrency].currencySign }}</span>
    </label>
  </ng-container>
</div>

优化注意点 #

• 所有联动逻辑完全基于Angular的数据绑定完成，不需要写手动DOM操作去修改标签文本、替换金额列表，维护成本更低
• 切换币种时主动清空已选金额，避免用户之前在美元档选的250000，切到拉里后仍然带着这个值，和当前币种的档位列表不匹配的问题
• 后续新增币种时，只需要在currencyConfigMap里追加对应配置，不需要修改模板代码

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