如何通过选定的下拉值更改值-Angular 7

Question

伙计们。在我的有角项目中有产品页面。因此，在这部分中，某些产品可能具有多种产品类型， 例如：

ProductId-1 TypeId-1 价格-$ 10

ProductId-1 TypeId-2 价格-$ 15

ProductId-1 TypeId-3 价格-$ 25

因此，在这种情况下，我将显示下拉框中的类型。所以我想通过选择下拉类型值来更改价格，所以我想将所选的TypeId和Price转换为component.ts以发送到Web 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>