CODEWITHSUNDEEP
angularselectng-optionsangularjs-ng-options
Luis Waesler
Luis Waesler

Reputation: 51

Angular: Select box with array of objects

I am very, very new to Angular... and I've been trying to solve a problem for the last two days. But either my google-fu is weak or my brain is getting too dumb to understand due to force feeding it Angular information in big chunks.

Anyway, I have the following array of objects for my products:

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

I am now trying to get the data from the array and display in an angular component. It should show the product.name, product.description and a select box for each product, so the user can choose a size. Think of a table for selling t-thirts or something.

I tried to accomplish this with this component

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 {

  }

}

For the HTML i first tried this:

<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>

Which sort of works, but makes the size change on both products if I change one them. So I tried ng-options and ng-repeat on the select field. But I can't for the life of me get it to display any data. All I get is an empty drop down. If I use something like

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

on the select, I get yelled at that "size does not exist on type 'ProductsListComponent'. I think I must have tried almost all possible combinations of that - all with the same result.

Sorry, I seriously don't get it. Could anyone please explain:

Thanks in advance for your help...

Upvotes: 0

Views: 840

Answers (1)

Eranki
Eranki

Reputation: 807

I tried the same one and it's working with me. When you change a select box, it is reflecting on the other select box too. Is that what your issue was? If so, see this https://stackblitz.com/edit/angular-javy5p?file=src%2Fapp%2Fapp.component.html

Upvotes: 0

Related Questions