Angular中如何获取下拉框选中的id？仅显示首个值id该如何处理

问题排查和解决方案 #

你当前的代码逻辑本身没有致命错误，只能拿到第一个id的问题通常是以下几个原因导致的，按顺序排查即可：

1. 未导入FormsModule导致双向绑定失效 #

Angular中使用[(ngModel)]双向绑定必须在对应组件所属的模块中导入FormsModule，否则绑定不会生效，selectedLevel会一直停留在初始化赋值的第一个值。
修正方式：在你的AppModule或当前功能模块中添加导入：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已有的导入项
    FormsModule
  ]
})
export class YourModule { }

2. 数据类型不匹配导致绑定异常 #

[value]属性只能存储字符串类型的值，如果你返回的clusterId是数字、对象等非字符串类型，会出现类型不匹配导致绑定失败。
修正方式：将option的[value]替换为支持任意类型的[ngValue]：

<select name="" [(ngModel)]="selectedLevel" id="syncPolicy" class="form-control">
  <option *ngFor="let data of ClusterIdDetails" [ngValue]="data.clusterId">{{ data.clusterName }}</option>
</select>

3. 仅打印了初始化值，未监听切换后的数值 #

你当前的console.log只在接口请求完成、初始化赋值时执行了一次，切换下拉选项时不会触发该打印，会让你误以为一直是第一个值。
修正方式：给select添加change事件监听切换动作，实时获取选中值：

<!-- 新增change事件 -->
<select name="" [(ngModel)]="selectedLevel" id="syncPolicy" class="form-control" (change)="onSelectChange()">
  <option *ngFor="let data of ClusterIdDetails" [ngValue]="data.clusterId">{{ data.clusterName }}</option>
</select>

// TS中新增切换回调方法
onSelectChange() {
  console.log('当前选中的clusterId：', this.selectedLevel)
}

额外优化建议 #

给变量添加空值判断，避免接口返回空数组时出现报错：

getClusterInfo() {
  this.ProjectClusterService.getPassClusterData().subscribe(res => {
    this.ClusterIdDetails = res['1tool-gitlab-pipeline'] || []
    // 数组有值才做初始化赋值
    if(this.ClusterIdDetails.length > 0) {
      this.selectedLevel = this.ClusterIdDetails[0].clusterId
      console.log(this.selectedLevel,"cluster")
    }
  });
}

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