Angular中为select下拉框绑定数组选项时出现显示空白的问题

1. 表单绑定模式冲突
   当前select控件同时叠加了响应式表单的formControlName指令、模板驱动表单的[(ngModel)]双向绑定。两类表单体系不支持在同一个控件上混用，会直接导致Angular内部的值匹配逻辑失效，动态渲染的option无法和控件值完成映射，最终触发选项内容渲染空白的异常。
2. 动态绑定方式不适配
   动态生成的option使用[ngValue]做值绑定，ngValue的设计定位是支持复杂对象类型的值绑定。搭配纯字符串数组、且存在绑定模式冲突时，DOM上渲染的option文本会被错误的匹配流程清空。硬编码的静态option因为值直接写在DOM属性上，不依赖Angular的动态匹配流程，因此可以正常展示。
3. 冗余代码引发的隐患
   表单中的校验判断逻辑引用了不存在的statusForm对象和status字段，和实际声明的emailForm表单结构完全不匹配，属于会触发运行时报错的无效代码。

• 严格二选一选择表单绑定体系，禁止混绑：
  • 采用响应式表单实现时，直接移除select上的[(ngModel)]="emailTem"绑定，仅保留formControlName="emailTem"。Angular 7及以上版本会直接对同控件混写响应式指令和ngModel的行为抛出控制台错误，提示移除重复绑定。
  • 采用模板驱动表单实现时，移除表单上的[formGroup]="emailForm"、所有控件的formControlName绑定，给select补全name="emailTem"属性，保留[(ngModel)]="emailTem"即可正常生效。
• 纯字符串数组的下拉选项，将[ngValue]="obj"替换为[value]="obj"即可，不需要使用面向复杂对象场景的ngValue，避免触发额外的匹配异常。
• 修正校验逻辑的引用对象，将错误的statusForm.get('status')替换为实际绑定的表单对象和对应字段，保证校验逻辑正常运行。

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