Angular使用*ngFor渲染select选项时placeholder不显示问题排查

问题原因 #

这个问题和*ngFor本身的用法无关，是Angular响应式表单的匹配逻辑 + 动态元素渲染时序共同导致的：

• 硬编码option时，所有option在页面初始化阶段就全部渲染完成，此时你的type表单控件如果没有主动设置初始值，会默认匹配到value为空的占位符option，所以显示正常。
• 用*ngFor动态生成option时，动态渲染是异步执行的：页面刚初始化时只渲染了占位符option，表单控件暂时匹配到占位符，等*ngFor的列表渲染完成后，表单控件会重新遍历所有option做值匹配。如果你没有给表单控件显式设置初始值为''（空字符串），表单控件默认的null/undefined和占位符的空字符串value匹配失败，就会自动选中第一个动态生成的option，导致占位符被覆盖。

解决方法 #

你可以任选以下一种方案修复：

1. 给表单控件设置初始值为空字符串
   初始化FormGroup时显式给type控件赋值为空字符串即可：

   import { FormBuilder } from '@angular/forms';
   
   constructor(private fb: FormBuilder) {}
   
   this.form = this.fb.group({
     type: [''] // 初始值明确设为空字符串
   })
   

2. 修改占位符的value匹配规则
   把占位符的value绑定为null，就能匹配表单控件默认的null初始值：

   <select id="type" formControlName="type">
     <option hidden [value]="null" disabled selected>Placeholder</option>
     <option *ngFor="let item of ['test 1', 'test 2']" [value]="item">{{ item }}</option>
   </select>
   

补充说明：disabled、selected这类固定为true的属性不需要加[]绑定，直接写属性名即可，写法更简洁。

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