时间戳

首页 > 解决方案 > Angular：带有对象数组的选择框

angular - Angular：带有对象数组的选择框

问题描述

我对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]
    }
    ];

我现在正试图从数组中获取数据并以角度组件显示。它应该显示产品名称、产品描述和每个产品的选择框，以便用户选择尺寸。想想卖 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="product.size as size for product in products"

在选择时，我对“'ProductsListComponent'类型上不存在尺寸大喊大叫。我想我必须尝试了几乎所有可能的组合 - 所有结果都相同。

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

在此先感谢您的帮助...

标签： angularselectng-optionsangularjs-ng-options

解决方案

我尝试了同样的一个，它对我有用。当您更改一个选择框时，它也会反映在另一个选择框上。那是你的问题吗？如果是这样，请参阅此 https://stackblitz.com/edit/angular-javy5p?file=src%2Fapp%2Fapp.component.html

推荐阅读