Angular7获取下拉框selectedIndex同步值及解决价格更新报错

1. 获取下拉框selectedIndex并追加到文本框 #

我来帮你实现这个需求，有两种简单的方式可以获取下拉框的selectedIndex，再把它追加到文本框内容里：

方式一：通过事件参数直接获取 #

在模板里给下拉框绑定change事件，传入$event.target拿到DOM元素，直接读取索引：

<!-- 下拉框 -->
<select #foodSelect [(ngModel)]="selectedItemId" (change)="appendIndexToInput($event.target)" class="form-control">
  <option value="0">--请选择--</option>
  <option value="1">汉堡</option>
  <option value="2">薯条</option>
</select>

<!-- 目标文本框 -->
<input type="text" [(ngModel)]="inputContent" placeholder="点击下拉框后追加索引" class="form-control mt-2">

组件类里实现方法：

selectedItemId: string = "0";
inputContent: string = "初始内容";

appendIndexToInput(ctrl: HTMLSelectElement) {
  const selectedIndex = ctrl.selectedIndex;
  // 把索引追加到文本框现有内容后面
  this.inputContent = `${this.inputContent} - 当前选中索引：${selectedIndex}`;
}

方式二：通过ViewChild获取下拉框元素 #

如果需要在其他场景（比如按钮点击）也能访问索引，可以用@ViewChild获取模板引用：

<select #foodSelect [(ngModel)]="selectedItemId" class="form-control">
  <!-- 选项同上 -->
</select>
<button (click)="appendIndexToInput()" class="mt-2">点击追加索引</button>

组件类代码：

import { ViewChild, ElementRef } from '@angular/core';

// ...
@ViewChild('foodSelect') foodSelect: ElementRef<HTMLSelectElement>;
selectedItemId: string = "0";
inputContent: string = "初始内容";

appendIndexToInput() {
  const selectedIndex = this.foodSelect.nativeElement.selectedIndex;
  this.inputContent += ` - 当前选中索引：${selectedIndex}`;
}

2. 切换下拉框时价格不更新且报错的问题 #

先帮你定位报错原因：你在模板里遍历的是itemList.data数组，但在updatePrice方法里直接访问this.itemList[ctrl.selectedIndex-1]——itemList是一个包含data数组的对象，不是数组本身，所以会出现Cannot read property 'price' of undefined的错误。

修正方案1：修复数组访问路径 #

把代码里的this.itemList改成this.itemList.data，同时加个判断防止数组越界：

updatePrice(ctrl){
  if(ctrl.selectedIndex == 0) {
    this.formData.price = 0;
    this.formData.item_name = '';
  } else {
    // 访问正确的数组路径：itemList.data
    const selectedItem = this.itemList.data[ctrl.selectedIndex - 1];
    // 加个判断避免索引越界导致的错误
    if(selectedItem) {
      this.formData.price = selectedItem.price;
      this.formData.item_name = selectedItem.item_name;
    }
  }
}

更优方案：通过选中的ID查找数据（推荐） #

依赖selectedIndex不够健壮，如果itemList.data的顺序发生变化，索引就会失效。更稳妥的方式是利用已经绑定的formData.item_id去查找对应的商品：

首先修改模板的change事件，不用传DOM元素：

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

然后修改组件类的方法：

updatePrice(){
  if(this.formData.item_id === "0") {
    this.formData.price = 0;
    this.formData.item_name = '';
  } else {
    // 根据选中的ID找到对应的商品
    const selectedItem = this.itemList.data.find(item => item.id == this.formData.item_id);
    if(selectedItem) {
      this.formData.price = selectedItem.price;
      this.formData.item_name = selectedItem.item_name;
    }
  }
}

这种方式完全基于数据绑定，不依赖DOM元素的索引，更符合Angular的开发理念，也避免了DOM操作可能带来的问题。

内容的提问来源于stack exchange，提问作者Shahid