は、項目を選択し、角度4

Question

screenshot for your perusal

こんにちは、 私は角に新しい午前中に入力フィールドに価格を示しています。ここにフォームグループがあり、選択されている製品の価格を左側の選択ドロップダウンメニューに表示したいと考えています。選択したアイテムの価格を取得する必要がありますので、これを数量フィールドに掛けて合計価格を得ることができます。 あなたの提案は高く評価されます。ありがとう。

<td><select class="form-control" formControlName="firstItem">         
         <option *ngFor="let item of list" [value]='item.name' selected> 
         {{item.name}} 
         </option> 
        </select></td> 
      <td><input type="text" class="form-control" readonly [value]="applyForm.get('firstItem').value"></td>    
      <td><input type="number" class="form-control" min="0" max="1000" formControlName="firstQty"></td> 
      <td><input type="text" class="form-control" readonly value="" formControlName="firstTotal"></td> 



private list = [ 
{ price: 205, name: 'NLIGHTEN Premium Soap' }, 
{ price: 205, name: 'NLIGHTEN Kojic Papaya with Glutathione' }, 
{ price: 550, name: 'NLIGHTEN Facial Cleanser' }]; 

Answer 1

私は optionsで [value]="item.price"を変更した、これに

<td> 
<select class="form-control" formControlName="firstItem">         
    <option *ngFor="let item of list" [value]="item.price" selected> 
    {{item.name}} 
    </option> 
</select> 
</td> 
<td> 
<input type="text" class="form-control" readonly [value]="applyForm.get('firstItem').value"> 
</td>    
<td> 
<input type="number" class="form-control" min="0" max="1000" formControlName="firstQty"> 
</td> 
<td> 
<input type="text" class="form-control" readonly value="" formControlName="firstTotal"> 
</td> 

をあなたのテンプレートを変更し

。 （'の代わりに二重引用符"を使用し、item.priceに割り当てられています）。