Как изменить значение по выбранному раскрывающемуся значению - Angular 7

Question

Хей, ребята. В моем угловом проекте есть страница товара. Таким образом, в этой части может быть несколько продуктов могут иметь несколько типов продуктов, например:

ProductId-1 TypeId-1 Цена- $ 10

ProductId-1 TypeId-2 Цена- $ 15

ProductId-1 TypeId-3 Цена- $ 25

Так что в этом случае я покажу типы в выпадающем списке. Поэтому я хочу изменить цену, выбрав раскрывающееся значение типа, поэтому я хочу получить выбранные TypeId и Price в component.ts для отправки в веб-API. Вы можете мне помочь.

Angular-7 Cli

Product.component.html

<h5 class="product-price">**I WANT TO SHOW HERE DROP-DOWN SELECTED VALUE PRICE**</h5>

<h5>Select Type</h5>
<select
   [(ngModel)]="selectedType" > 
   <option 
       *ngFor="let type of productType" 
       [ngValue]="type.id">
        {{type.name}}
   </option>
 </select> 

Product.component.ts

 selectedType: { id: any; name:any ; price:any };

 productType:Array<Object> = [
  {id: 1, name: "100 ml", price:2000},
  {id: 2, name: "200 ml", price:4000},
  {id: 3, name: "300 ml", price:3000}
 ];

Answer 1

В качестве объекта можно использовать значение свойства ngValue, а затем получить цену из переменной модели.

<h5 class="product-price">{{selectedType?.price}}</h5>

<h5>Select Type</h5>
<select
   [(ngModel)]="selectedType" > 
   <option 
       *ngFor="let type of productType" 
       [ngValue]="type">
        {{type.name}}
   </option>
 </select>