Angular Select组件需二次交互才渲染选项问题排查

异常现象 #

在Angular项目中出现如下异常：页面加载完成后，select组件无选项显示，首次点击下拉框仍无内容；将焦点切换到页面其他区域后再次点击select，下拉选项才正常显示。

对应模板代码 #

<div class="align-items-center">
          <label class="form-label">Select Value</label>
          <div class="input-group">
            <select formControlName="idUsuario" class="form-select" aria-label="Select Value">
              <option value="">-- Value--</option>
              @for (value of valueList; track usuario.id) {
                <option [value]="value .id">{{ value .option}} {{ value .option2}}</option>
              }
            </select>
          </div>

        </div>

组件相关代码 #

public valueList: Value[] = [];

ngOnInit(): void {
  this.valueServie.ggetValues().subscribe((values) => {
    this.valueList = values;
  });
}

可能的原因 #

• @for循环track表达式错误：循环中使用track usuario.id，但循环变量是value，未定义的usuario会导致Angular无法正确跟踪列表项，数据更新后视图无法同步渲染。正确写法应为track value.id。
• 数据绑定语法错误：模板中value .id、value .option等写法里，value与属性名之间存在多余空格，Angular无法正确解析这些绑定表达式，导致渲染出的option值无效，下拉框无法正常显示选项。
• 变更检测触发不及时（次要）：若服务的异步操作在Angular Zone外执行，可能导致数据赋值后变更检测未立即触发，但切换焦点会手动触发变更检测，不过这是次要因素，核心问题还是前面的语法错误。

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