Angular 14中如何为*ngFor循环的select元素设置默认值？

我看到过相关问题的解答，但在我的代码里无法生效。

组件中定义了两个变量：

MediaOptions: string[] = ['all', 'print', 'screen'];
DefaultOption: string = this.MediaOptions[0];

模板里我尝试了多种写法都无效：

第一种写法：

<select [(ngModel)]="Value">
  <option
    *ngFor="let a of MediaOptions"
    [ngValue]="a"
    [selected]="a === DefaultOption ? true : null"
  >
    {{a}}
  </option>
</select>

第二种写法：

<select [(ngModel)]="Value">
  <option
    *ngFor="let a of MediaOptions; let i = index"
    [ngValue]="a"
    [selected]="i === 0 ? true : null"
  >{{a}}</option>
</select>

第三种写法：

<select [(ngModel)]="Value">
  <option
    *ngFor="let a of MediaOptions"
    [ngValue]="a"
    [selected]="a === 'all'"
  >{{a}}</option>
</select>

我还在[selected]和[attr.selected]之间切换尝试，也试过直接写固定的选中条件，但都没效果。是不是相关解答发布后Angular有变更？该怎么解决？

更新：
之前遗漏了关键信息，[(ngModel)]绑定的Value是一个setter函数，代码如下：

set Value(val: any){
    this.MediaTypeControl = val;
    this.onChange(val);
    this.onTouch(val);
}

这是在使用ControlValueAccessor创建自定义输入组件的Angular表单场景中。

核心问题 #

在Angular中，当使用[(ngModel)]（或表单控件）绑定<select>时，框架会忽略[selected]属性，选中状态完全由绑定的模型值控制。而你的场景里，Value只有setter没有对应的getter，导致Angular无法正确读取当前模型值来匹配选项，自然无法设置默认选中项。另外，ControlValueAccessor自定义组件的默认值初始化需要遵循Angular表单生命周期规则。

具体解决步骤 #

1. 给Value添加getter
   确保Angular能读取到当前模型值，修改代码：

   get Value(): any {
       return this.MediaTypeControl;
   }
   
   set Value(val: any){
       this.MediaTypeControl = val;
       this.onChange(val);
       this.onTouch(val);
   }
   

2. 初始化默认值
   在组件初始化时（比如ngOnInit钩子），直接给Value赋值默认选项，不需要依赖模板里的[selected]：

   ngOnInit(): void {
       this.Value = this.DefaultOption;
   }
   

3. 移除模板中的[selected]属性
   模板简化为：

   <select [(ngModel)]="Value">
     <option *ngFor="let a of MediaOptions" [ngValue]="a">
       {{a}}
     </option>
   </select>
   

4. 确保ControlValueAccessor的writeValue方法正确处理初始值
   如果自定义组件与父表单集成，需要在writeValue方法中处理初始值：

   writeValue(value: any): void {
       if (value !== undefined) {
           this.MediaTypeControl = value;
           // 父组件未传入初始值时，设置默认选项
           if (!value) {
               this.Value = this.DefaultOption;
           }
       }
   }
   

为什么之前的方法无效？ #

• Angular处理表单控件绑定（包括ngModel）时，会优先使用模型值控制选中状态，模板里的[selected]会被覆盖。
• 只有setter的Value无法让Angular完成双向绑定的读取操作，导致模型与视图同步失败。

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