Angular新手求助：实现两组Radio Button联动的咖啡订单购物车功能

嘿，别担心！作为Angular新手碰到这种联动的表单需求很正常，我来一步步带你实现这个咖啡店订单购物车功能~

1. 定义数据结构 #

首先在组件的控制器（.ts文件）里定义你的饮品和附加项数据。这里分两种常见情况适配不同的数据关联方式：

情况一：饮品直接包含对应的附加项 #

如果你的附加项和饮品是一一绑定的，可以把附加项直接嵌套在饮品对象里，逻辑更直观：

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

@Component({
  selector: 'app-coffee-cart',
  templateUrl: './coffee-cart.component.html',
  styleUrls: ['./coffee-cart.component.css']
})
export class CoffeeCartComponent {
  // 饮品数组，每个饮品自带对应的附加项列表
  drinks = [
    { id: 1, name: 'Latte', price: 1.00, addons: [
      { id: 101, name: 'Extra Shot', price: 0.50 },
      { id: 102, name: 'Vanilla Syrup', price: 0.30 }
    ]},
    { id: 2, name: 'Tea', price: 0.80, addons: [
      { id: 201, name: 'Honey', price: 0.20 },
      { id: 202, name: 'Lemon', price: 0.15 }
    ]}
  ];

  // 存储选中的饮品和附加项
  selectedDrink: any;
  selectedAddon: any;
}

情况二：附加项是单独数组，通过ID关联饮品 #

如果你的附加项是单独维护的（比如从接口获取的独立列表），可以用drinkId字段和饮品关联：

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

@Component({
  selector: 'app-coffee-cart',
  templateUrl: './coffee-cart.component.html',
  styleUrls: ['./coffee-cart.component.css']
})
export class CoffeeCartComponent {
  drinks = [
    { id: 1, name: 'Latte', price: 1.00 },
    { id: 2, name: 'Tea', price: 0.80 }
  ];

  addons = [
    { id: 101, drinkId: 1, name: 'Extra Shot', price: 0.50 },
    { id: 102, drinkId: 1, name: 'Vanilla Syrup', price: 0.30 },
    { id: 201, drinkId: 2, name: 'Honey', price: 0.20 },
    { id: 202, drinkId: 2, name: 'Lemon', price: 0.15 }
  ];

  selectedDrink: any;
  selectedAddon: any;

  // 过滤出当前选中饮品对应的附加项
  get filteredAddons() {
    if (!this.selectedDrink) return [];
    return this.addons.filter(addon => addon.drinkId === this.selectedDrink.id);
  }
}

2. 编写模板（.html文件） #

接下来在模板里实现单选按钮的联动逻辑，根据数据结构选择对应模板：

对应情况一的模板 #

<div class="cart-container">
  <h2>咖啡店订单</h2>

  <!-- 饮品选择组 -->
  <div class="section">
    <h3>选择饮品</h3>
    <div *ngFor="let drink of drinks" class="radio-item">
      <label>
        <input type="radio" name="drink" [(ngModel)]="selectedDrink" [value]="drink">
        {{ drink.name }} - ${{ drink.price.toFixed(2) }}
      </label>
    </div>
  </div>

  <!-- 附加项选择组：选中饮品后才显示 -->
  <div *ngIf="selectedDrink" class="section">
    <h3>选择附加项</h3>
    <div *ngFor="let addon of selectedDrink.addons" class="radio-item">
      <label>
        <input type="radio" name="addon" [(ngModel)]="selectedAddon" [value]="addon">
        {{ addon.name }} - ${{ addon.price.toFixed(2) }}
      </label>
    </div>
  </div>

  <!-- 订单摘要：选中附加项后显示 -->
  <div *ngIf="selectedAddon" class="summary section">
    <h3>订单摘要</h3>
    <p>饮品: {{ selectedDrink.name }} - ${{ selectedDrink.price.toFixed(2) }}</p>
    <p>附加项: {{ selectedAddon.name }} - ${{ selectedAddon.price.toFixed(2) }}</p>
    <p class="total"><strong>总计: ${{ (selectedDrink.price + selectedAddon.price).toFixed(2) }}</strong></p>
  </div>
</div>

对应情况二的模板 #

只需要把附加项部分替换为过滤后的列表即可：

<!-- 附加项选择组 -->
<div *ngIf="selectedDrink" class="section">
  <h3>选择附加项</h3>
  <div *ngFor="let addon of filteredAddons" class="radio-item">
    <label>
      <input type="radio" name="addon" [(ngModel)]="selectedAddon" [value]="addon">
      {{ addon.name }} - ${{ addon.price.toFixed(2) }}
    </label>
  </div>
</div>

3. 关键逻辑说明 #

• 双向绑定：用[(ngModel)]绑定选中的饮品和附加项，点击单选按钮时，控制器里的变量会自动同步更新，不用手动写事件监听。
• 条件显示：用*ngIf="selectedDrink"控制附加项区域的显示，只有选中饮品后才会出现附加项选择框，符合用户操作流程。
• 单选按钮分组：给同一组单选按钮设置相同的name属性，确保同一时间只能选中一个选项，避免多选混乱。
• 价格格式化：用toFixed(2)把价格格式化为两位小数，符合货币的常规显示习惯。

4. 可选样式（.css文件） #

可以加一点简单的样式让界面更友好：

.cart-container {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.section {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.radio-item {
  margin: 8px 0;
}

.summary .total {
  font-size: 1.1em;
  color: #2c3e50;
}

这样你就能实现一个完整的联动购物车啦！如果之后需要扩展功能（比如添加到购物车列表、修改数量），都可以基于这个基础继续开发~

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