如何从Angular Select下拉框中获取选中项的ID？

解决方法：从Change事件中获取选中项ID #

你现在拿到Event对象是正常的——Angular中(change)事件默认传递的就是原生的Event实例。要获取选中的category.id，有几种简单的方式，根据你的需求选就行：

方法1：从Event对象中提取选中值

直接修改你的onChangeObj函数，通过event.target访问select元素的value属性（因为你已经给<option>绑定了[value]="category.id"）：

TypeScript代码修改：

selectedObj: string | number = ''; // 根据你的category.id类型调整，比如如果是数字就设为number

onChangeObj(event: Event) {
  // 把event.target转换成HTMLSelectElement类型，方便TypeScript识别属性
  const selectElement = event.target as HTMLSelectElement;
  this.selectedObj = selectElement.value;
  console.log(this.selectedObj); // 现在就能拿到选中的ID了
}

你的HTML代码不需要改动，保持原来的写法即可。

方法2：用模板变量直接传递选中值

这种方式更简洁，不需要在函数里处理Event对象。给<select>加一个模板变量，然后在(change)事件中直接传递变量的value：

HTML代码修改：

<select #categorySelect class="form-select w-50 p-2 text-primary mt-2" aria-label="select" (change)="onChangeObj(categorySelect.value)">
  <option *ngFor="let category of (categories$ | async)" [value]="category.id">{{category.categoryName}}</option>
</select>

TypeScript代码修改：

selectedObj: string | number = '';

onChangeObj(selectedId: string | number) {
  this.selectedObj = selectedId;
  console.log(this.selectedObj);
}

方法3：使用Angular的NgModel（推荐）

如果你的场景是表单相关，用双向绑定[(ngModel)]会更符合Angular的开发习惯，还能自动同步选中值，不用手动处理change事件：

HTML代码修改：

<select class="form-select w-50 p-2 text-primary mt-2" aria-label="select" [(ngModel)]="selectedObj">
  <option *ngFor="let category of (categories$ | async)" [value]="category.id">{{category.categoryName}}</option>
</select>

TypeScript代码：

selectedObj: string | number = '';

// 如果需要在选中变化时执行额外逻辑，可以用ngModelChange事件
onModelChange(selectedId: string | number) {
  this.selectedObj = selectedId;
  // 比如在这里发起API请求、更新其他数据等
  console.log(this.selectedObj);
}

如果需要额外逻辑，把HTML改成：

<select class="form-select w-50 p-2 text-primary mt-2" aria-label="select" [ngModel]="selectedObj" (ngModelChange)="onModelChange($event)">
  <option *ngFor="let category of (categories$ | async)" [value]="category.id">{{category.categoryName}}</option>
</select>

每种方法的适用场景：

• 方法1：需要访问事件的其他属性（比如事件触发时间、元素状态）时用
• 方法2：只想快速获取选中值，逻辑简单时用
• 方法3：表单场景下推荐，能更方便地管理表单数据状态

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