Angular 2+中如何在select的change事件中获取option的index属性？

你遇到的问题是因为直接在(change)事件里传递attr.index的写法不符合Angular的模板语法，Angular会把它当成组件类中的变量，而不是当前选中option的属性，所以无法生效。下面给你几种实用的解决方案：

方法一：利用ngModel绑定的值查找对应项 #

这种方法不需要修改太多现有代码，通过你已经绑定的lv3值，去lv3List数组中匹配出对应的项，进而获取索引或其他属性：

模板代码 #

<select style="width: 200px" (change)="lv3Change()" id="lv3" name="lv3" [(ngModel)]="lv3" >
  <option *ngFor="let tmp of lv3List; let i=index" [value]="tmp.valueField">
    {{tmp.textField}}
  </option>
</select>

（其实这里不需要[attr.index]，因为我们可以通过数组匹配拿到索引）

组件类代码 #

// 假设你的数据结构是这样的，根据实际情况调整类型
lv3: string;
lv3List: { valueField: string; textField: string }[] = [
  // 你的列表数据
];

lv3Change() {
  // 找到选中的项
  const selectedItem = this.lv3List.find(item => item.valueField === this.lv3);
  if (selectedItem) {
    const index = this.lv3List.indexOf(selectedItem);
    console.log('选中项的索引:', index);
    console.log('选中项的完整数据:', selectedItem);
    // 这里可以拿到选中项的所有属性，比如selectedItem.textField等
  }
}

方法二：通过$event直接获取DOM元素的属性 #

如果你确实需要通过option的自定义属性来获取值，可以借助$event参数拿到select元素，再从中提取选中option的属性：

模板代码 #

<select style="width: 200px" (change)="lv3Change($event)" id="lv3" name="lv3" [(ngModel)]="lv3" >
  <option *ngFor="let tmp of lv3List; let i=index" [value]="tmp.valueField" [attr.index]="i">
    {{tmp.textField}}
  </option>
</select>

组件类代码 #

lv3: string;
lv3List: { valueField: string; textField: string }[] = [];

lv3Change(event: Event) {
  const selectEl = event.target as HTMLSelectElement;
  // 获取选中的option元素
  const selectedOption = selectEl.selectedOptions[0];
  if (selectedOption) {
    // 获取自定义的index属性
    const index = selectedOption.getAttribute('index');
    console.log('选中的索引（来自自定义属性）:', index);
    // 其实select元素本身就有selectedIndex属性，不需要自定义attr.index也能拿到索引
    console.log('直接获取索引:', selectEl.selectedIndex);
  }
}

方法三：绑定整个对象到option（推荐） #

如果想更直接地获取选中项的所有属性，推荐使用[ngValue]代替[value]，它可以绑定任意类型的对象，这样ngModel直接绑定的就是整个选中项：

模板代码 #

<select style="width: 200px" (change)="lv3Change()" id="lv3" name="lv3" [(ngModel)]="selectedLv3Item" >
  <option *ngFor="let tmp of lv3List; let i=index" [ngValue]="tmp">
    {{tmp.textField}}
  </option>
</select>

组件类代码 #

// 定义选中项的类型，和你的列表项结构一致
selectedLv3Item: { valueField: string; textField: string };
lv3List: { valueField: string; textField: string }[] = [];

lv3Change() {
  if (this.selectedLv3Item) {
    const index = this.lv3List.indexOf(this.selectedLv3Item);
    console.log('选中项的索引:', index);
    console.log('选中项的valueField:', this.selectedLv3Item.valueField);
    console.log('选中项的textField:', this.selectedLv3Item.textField);
    // 直接拿到所有属性，不需要额外查找
  }
}

这三种方法都能解决你的问题，其中方法三最直观也最符合Angular的表单设计思路，推荐优先使用~

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