Angular响应式表单中select下拉框不显示内容如何解决？

问题解决步骤 #

1. 修复模板option绑定语法 #

你当前的value="area.id"属于静态字符串赋值，Angular不会将引号内的内容解析为组件变量，需要改为属性绑定语法，修改select部分代码如下：

<select formControlName="area">
  <option value="">Seleccione el area</option>
  <option *ngFor="let area of areas" [value]="area.id">{{area.nombre}}</option>
</select>

如果需要绑定整个area对象作为选中值，可以将[value]替换为[ngValue]="area"。

2. 确认*ngFor指令可用 #

如果你的组件是声明在自定义功能模块中，需要确保对应模块的imports数组已经引入了CommonModule，否则*ngFor循环不会生效，不会渲染option节点。

3. 调整初始化时序加日志排查数据 #

先初始化表单再发起异步请求，同时加日志确认部门列表接口返回正常：

ngOnInit() {    
  // 优先初始化表单
  this.iniciarFormulario();  

  this.dataService.getCodigoInterno().subscribe(
    result => this.elCodigoInterno = result,
    error => console.log('获取内部编码失败: ', error)
  );

  this.dataService.obtenerAreas().subscribe(
    result => {
      this.areas = result;
      // 新增日志确认返回数据格式与长度
      console.log('部门列表返回结果：', result);
    },
    error => console.log('获取部门列表失败: ', error)
  ); 
}

加日志后打开浏览器控制台，确认接口返回的数组是否存在，每个元素是否有nombre字段，避免接口返回字段名和你本地定义的Area接口不匹配。

4. 可选优化 #

给area表单控件加上必填校验（如果业务需要），初始值设为null更符合语义：

area: new FormControl(null, Validators.required),

内容的提问来源于stack exchange，提问作者Jhon Hernández