Angular。选择有对象数组的盒子

Question

我对Angular非常非常陌生......这两天我一直在尝试解决一个问题。但要么是我的google-fu很弱，要么是我的大脑变得太笨了，由于强行给它输入大块的Angular信息而无法理解。

总之，我的产品有如下的对象数组。

    import { Product } from './product';

    export const PRODUCTS: Product[] = [
     {
         id:1,
         name: "Product1",
         description:"Great description 1",
         price: [1,2,3,4],
         size: [5,10,50,500]
    },
    {
        id:2,
        name: "Product2",
        description:"Great description 2",
        price: [5,6,7,8],
        size: [6,12,18,24]
    }
    ];

我现在试图从数组中获取数据 并在Angular组件中显示出来。它应该显示product.name、product.description和每个产品的选择框，这样用户就可以选择尺寸。想象一下卖T-thirts之类的表格。

我试着用这个组件来实现这个功能

import { Component, OnInit } from '@angular/core';
import {FormControl} from '@angular/forms'

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;
  productControl = new FormControl('');
  sizecontrol = new FormControl('');
  name = new FormControl('');
  selectedPrice: string = "";
  chosenSize: string = "";
  chosenProduct: string ="";


  changeSize(x) {
    console.log("Size", this.chosenSize);
    this.selectedPrice = this.products[x].price[this.chosenSize];
  }

  constructor() { 
  }

  ngOnInit(): void {

  }

}

对于HTML，我首先尝试了这个。

<h2>Products</h2>
<div *ngFor="let product of products; let x = index">
  <h3>{{product.name}}</h3>
  <p>{{product.description}} Index X={{x}}</p>
  <select 
        [formControl]="sizecontrol" 
        [(ngModel)]="chosenSize" 
        (ngModelChange)="changeSize()"

    >        
    <option 
        *ngFor="let size of product.size; let i = index" 
        [ngValue]="i" 
        (change)="changeSize">
        {{ size }} {{x}} {{i}}
    </option>

  </select>


  <p>{{sizecontrol.value}}</p>
  <p>Selected Price: {{selectedPrice}}</p>
  <p>Index X: {{x}}</p>
  <p>Index i: {{chosenSize}}</p>
</div>

但如果我改变了其中一个，两个产品的大小就会改变。 所以我试了ng-options和ng-repeat在选择栏上。所以我试了ng-options和ng-repeat在选择字段上，但我无法让它显示任何数据。但我无法让它显示任何数据。我得到的只是一个空的下拉菜单。如果我使用类似

ng-options="product.size as size for product in products" 

在选择时，我被告知"'ProductsListComponent'类型中不存在尺寸"，我想我一定尝试了几乎所有可能的组合，结果都一样。我想我一定尝试了几乎所有可能的组合--结果都一样。

对不起，我真的不明白。谁能解释一下。

• 我如何让ng-options（或ng-repeat）工作？
• 如何将两个选择框分开？使得改变第一个选择框不改变第二个选择框。

先谢谢你的帮助...

Answer 1

我尝试了同样的一个，它的工作与我。当你改变一个选择框时，它也会反映在其他选择框上。你的问题是这样的吗？如果是，请看这个 https:/stackblitz.comeditangular-javy5p?file=src%2Fapp%2Fapp.component.html。