Angular中获取下拉选择框（Select）选中选项的索引位置

没问题，我来帮你实现这个需求！你在表格里用let i = index获取索引的思路是对的，下拉框里也可以用类似的方式，不过需要调整一下实现逻辑，我给你两种简单可行的方案：

方案1：绑定索引到option的value属性 #

直接把每个选项的索引绑定到[value]上，然后在change事件里获取这个值：

<select (change)="getPos($event.target.value)" required>
  <option *ngFor="let car of cars; let i = index" [value]="i">
    {{ car.name }} <!-- 替换成你要显示的选项文本，比如car的某个属性 -->
  </option>
</select>

对应的组件方法：

getPos(indexStr: string) {
  // 把字符串转成数字索引
  const selectedIndex = parseInt(indexStr, 10);
  console.log('选中选项的索引：', selectedIndex);
  // 还可以直接拿到对应的car对象
  const selectedCar = this.cars[selectedIndex];
}

方案2：利用原生DOM的selectedIndex属性 #

这种方法不需要额外绑定value，直接通过事件对象获取select元素的selectedIndex属性，更简洁：

<select (change)="getPos($event)" required>
  <option *ngFor="let car of cars">
    {{ car.name }}
  </option>
</select>

对应的组件方法：

getPos(event: Event) {
  // 类型断言为HTMLSelectElement，方便访问DOM属性
  const selectEl = event.target as HTMLSelectElement;
  const selectedIndex = selectEl.selectedIndex;
  console.log('选中选项的索引：', selectedIndex);
  // 同样可以拿到对应的car对象
  const selectedCar = this.cars[selectedIndex];
}

这两种方案都能实现和表格里一样的索引获取效果，你可以根据自己的习惯选择。需要注意的是，如果cars数组后续有更新（比如增删元素），索引会自动同步更新，和你表格里的逻辑完全一致。

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