Angular: выбор поля с массивом объектов - PullRequest
Новая
       23

Angular: выбор поля с массивом объектов

0 голосов
/ 29 апреля 2020

Я очень, очень плохо знаком с 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 и поле выбора для каждого продукта, чтобы пользователь мог выбрать размер. Подумайте о столе для продажи футболок или чего-то подобного.

Я пытался выполнить sh это с помощью этого компонента 

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 ». Я думаю, что я, должно быть, попробовал почти все возможные комбинации этого - все с тот же результат.

Извините, я серьезно не понимаю. Кто-нибудь может объяснить, пожалуйста:

  • Как мне заставить работать параметры ng (или ng-repeat)?
  • Как разделить два поля выбора? Чтобы изменение первого поля не изменило второе поле выбора

Заранее спасибо за помощь ...

1 Ответ

0 голосов
/ 29 апреля 2020

Я попробовал тот же самый, и он работает со мной. Когда вы меняете поле выбора, оно отражается и на другом окне выбора. Это то, что ваша проблема была? Если это так, см. https://stackblitz.com/edit/angular-javy5p?file=src%2Fapp%2Fapp.component.html

...