如何在chage上获取selectedIndex值并在angular 7中附加到其他文本框值中

Question

在我的棱角分明的应用程序中，我有一个表单，当我从下拉菜单中更改食品项目时，表单中有四个字段，那么对于任何人都有想法的食品，价格字段都不会更改。

这是api

的响应

它显示了类似错误TypeError: Cannot read property 'price' of undefined

的错误

这是我的component.html

<div class="form-group">
        <label>Foot Item :</label>
        <select name="item_id" #item_id="ngModel" [(ngModel)]="formData.item_id" class="form-control" (change)="updatePrice($event.target)">
            <option value="0">--Select--</option>
            <option *ngFor="let item of itemList.data" value="{{item.id}}">{{item.item_name}}</option>
        </select>
    </div>

这是.ts文件

updatePrice(ctrl){
    if(ctrl.selectedIndex == 0)
          {
              this.formData.price = 0;
              this.formData.item_name = '';
          }
          else
          {
               this.formData.price = this.itemList[ctrl.selectedIndex-1].price;
      this.formData.item_name = this.itemList[ctrl.selectedIndex-1].item_name;
          }

    }

Answer 1

我认为这段代码应该对您有用：

<div class="form-group">
   <label>Foot Item :</label>
       <select name="item_id" #item_id="ngModel" [(ngModel)]="formData.item_id" 
          class="form-control" (change)="updatePrice($event)">
          <option value="-1">--Select--</option>
          <option *ngFor="let item of itemList.data;let i=index" [value]="i"> 
          {{item.item_name}}</option>
       </select>
  </div>

和“ ts”文件中：

 updatePrice(ctrl){
    if(ctrl.target.value == -1)
    {
        this.formData.price = 0;
        this.formData.item_name = '';
    }
    else
    {

    this.formData.price = this.itemList.data[ctrl.target.value].price;
    this.formData.item_name = this.itemList.data[ctrl.target.value].item_name;
    }

}

Answer 2

我认为您的错误是您正在执行this.itemList [index] .price，而在DOM中，您已经迭代了itemList.data。因此应为itemList.data [index] .price。

替换ngModelChange的更改侦听器将发出所选选项的值。由于选择更改选项时选项的值为索引，因此将发出所选选项的索引，您将可以轻松访问数组项。