Angular：基于对象数组实现独立选择框的问题求助

嘿，刚接触Angular遇到这种表单循环的问题太正常了，别灰心！我帮你拆解一下问题，一步步解决你的两个疑问：

问题1：为什么ng-options不工作？ #

首先得澄清一个关键点：你用的是Angular（2+版本），而ng-options是AngularJS（1.x）的语法，这就是你报错的根本原因！在Angular中，我们用*ngFor来遍历生成<option>标签，和你之前尝试的思路一致，但需要修正绑定逻辑。

问题2：如何让选择框独立互不影响？ #

你现在所有选择框都绑定了同一个sizecontrol和chosenSize变量，这就导致修改一个时所有选择框同步变化——因为它们共享同一个状态。解决办法是给每个产品单独维护自己的选中状态，而不是用全局变量。

完整修正方案 #

第一步：修改组件代码

我们去掉全局的sizecontrol、chosenSize，换成一个数组来存储每个产品的选中尺寸索引，同时简化价格显示的逻辑：

import { Component, OnInit } from '@angular/core';
import { Product } from '../product';
import { PRODUCTS } from '../mock-products';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss']
})
export class ProductListComponent implements OnInit {
  products = PRODUCTS;
  // 用数组存储每个产品的选中尺寸索引，初始默认选中第一个（索引0）
  selectedSizeIndices: number[] = [];

  ngOnInit(): void {
    // 初始化每个产品的默认选中索引
    this.products.forEach(() => this.selectedSizeIndices.push(0));
  }

  // 获取指定产品当前选中的价格
  getSelectedPrice(productIndex: number): number {
    const product = this.products[productIndex];
    const selectedSizeIndex = this.selectedSizeIndices[productIndex];
    return product.price[selectedSizeIndex];
  }
}

第二步：修改HTML模板

现在每个选择框绑定到对应产品的selectedSizeIndices[x]，用*ngFor生成尺寸选项，去掉不必要的formControl和ngModel混用（Angular中不建议同时使用响应式表单和模板驱动表单的语法）：

<h2>Products</h2>
<div *ngFor="let product of products; let x = index">
  <h3>{{product.name}}</h3>
  <p>{{product.description}}</p>
  
  <!-- 每个选择框绑定到当前产品的选中索引 -->
  <select [(ngModel)]="selectedSizeIndices[x]">
    <!-- 遍历当前产品的size数组生成选项 -->
    <option *ngFor="let size of product.size; let i = index" [ngValue]="i">
      {{ size }}
    </option>
  </select>

  <!-- 直接调用方法获取当前选中的价格 -->
  <p>Selected Price: {{ getSelectedPrice(x) }}</p>
</div>

关键修改点解释 #

1. 独立状态管理：selectedSizeIndices数组的索引和产品数组的索引一一对应，每个产品的选中状态互不干扰。
2. 正确的下拉框生成：用*ngFor="let size of product.size"遍历当前产品的尺寸数组，[ngValue]="i"绑定尺寸的索引（这样可以通过索引对应到price数组的对应值）。
3. 简化价格显示：通过getSelectedPrice(x)方法，根据产品索引和选中的尺寸索引，直接从price数组中取出对应价格，避免了复杂的事件绑定。
4. 移除冲突语法：去掉了formControl和ngModel的混用，这里用模板驱动表单的[(ngModel)]就足够满足需求，更适合新手理解。

额外优化建议 #

如果想让代码更清晰，可以给Product接口添加一个selectedSizeIndex属性（如果允许修改的话），这样就不需要单独维护selectedSizeIndices数组：

// product.ts
export interface Product {
  id: number;
  name: string;
  description: string;
  price: number[];
  size: number[];
  selectedSizeIndex?: number; // 新增可选属性
}

然后在组件初始化时给每个产品设置默认值：

ngOnInit(): void {
  this.products.forEach(product => product.selectedSizeIndex = 0);
}

对应的HTML修改为：

<select [(ngModel)]="product.selectedSizeIndex">
  <option *ngFor="let size of product.size; let i = index" [ngValue]="i">
    {{ size }}
  </option>
</select>
<p>Selected Price: {{ product.price[product.selectedSizeIndex] }}</p>

这样代码会更直观，每个产品的状态都存在自己的对象里。

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