Angular中获取HTMLOptionElement的id属性返回0问题求助

问题描述 #

在Angular项目中，尝试获取选中<option>的id属性时始终返回0，无法得到预期的实际ID（如1、2）。相关代码如下：

HTML模板 #

<div class="col-8">
    <select (change)="processSelection($event)" #selectedCategory class="custom-select">
        <option value="" class="text-center">Select</option>
        <option [ngValue]="category" class="text-center"  
         *ngFor="let category of categoryNameAndId" [attr.id]="[category.id]">
            {{category.name}}
        </option>
    </select>
</div>

组件逻辑 #

processSelection(event:Event){
   const target  = event.target as HTMLOptionElement;
   const selected = target.value() // 此处存在语法错误，应为target.value
   const id = +target.id // 无法得到预期结果
  // const id = Number(target.getAttribute('id'); // 同样无效
   console.log("id is "+id);
}

注：直接使用<div>{{category.id}}</div>可正常显示预期ID值。

问题分析与解决方案 #

核心错误：混淆了<select>与<option>元素 #

event.target指向的是触发change事件的<select>标签，而非当前选中的<option>标签。你将其强制转换为HTMLOptionElement是错误的——你实际在取<select>的id（而它根本没设置id，转为数字后就是0）。

方案1：正确获取选中的<option>元素 #

先获取<select>元素，再通过它的selectedIndex和options集合拿到选中的<option>：

processSelection(event: Event) {
  const selectEl = event.target as HTMLSelectElement;
  const selectedOption = selectEl.options[selectEl.selectedIndex];
  // 修正id绑定后，即可正确获取
  const id = +selectedOption.id;
  console.log("id is " + id);
}

同时需要修正id的绑定写法——原代码里的[attr.id]="[category.id]"多了一层数组包裹，直接绑定数值即可：

<option [ngValue]="category" class="text-center"  
         *ngFor="let category of categoryNameAndId" 
         [attr.id]="category.id">
    {{category.name}}
</option>

方案2：更可靠的方式——直接通过ngValue取完整对象 #

既然你已经用[ngValue]="category"绑定了整个分类对象，完全没必要通过id属性间接获取，直接从选中值里提取ID更可靠：

processSelection(event: Event) {
  const selectEl = event.target as HTMLSelectElement;
  // 因为用了ngValue，selectedValue就是对应的category对象
  const selectedCategory = selectEl.value as unknown as {id: number, name: string};
  console.log("id is " + selectedCategory.id);
}

如果用模板引用变量#selectedCategory，还可以简化逻辑：

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

// 组件中先获取模板引用
@ViewChild('selectedCategory') selectedCategory!: ElementRef<HTMLSelectElement>;

processSelection() {
  const selectedCategory = this.selectedCategory.nativeElement.value as unknown as {id: number, name: string};
  console.log("id is " + selectedCategory.id);
}

对应的HTML修改为：

<select (change)="processSelection()" #selectedCategory class="custom-select">
    <!-- 其他代码不变 -->
</select>

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