Angular下拉框加载时默认选中首项并获取值的问题排查

问题根源 #

1. ngModel与手动selected属性冲突：Angular中使用[(ngModel)]绑定下拉框时，选中状态完全由model变量控制，手动添加的[attr.selected]会被框架忽略，这就是你设置i==1或i>0都不符合预期的核心原因。
2. change事件触发条件限制：(change)事件仅在用户手动修改选项时触发，页面初始化时的自动选中不会触发该方法。
3. 索引判断错误：*ngFor的index从0开始，空选项之后的第一个有效选项对应的index是0，不是1，所以i==1实际选中的是第二个有效选项。

解决方案 #

1. 清理模板中的冲突属性

移除模板里的[attr.selected]，让ngModel全权控制选中状态：

<select class="form-control custom-select" [(ngModel)]="model" (change)="changeVertical(model)">
  <option value=""></option>
  <option *ngFor="let vertical of ls.registries['verticals']" [value]="vertical.code">
    {{vertical.name}}
  </option>
</select>

2. 组件初始化时赋值并触发操作

在组件的ngOnInit生命周期钩子中，给model赋值第一个有效选项的code，同时主动调用changeVertical方法执行相关逻辑：

import { OnInit } from '@angular/core';
import { EventEmitter, Output } from '@angular/core';

export class YourComponent implements OnInit {
  model: string;
  ls: any; // 确保该变量已正确初始化或注入
  @Output() changeCategory = new EventEmitter<string>();

  ngOnInit(): void {
    // 先判断数据是否存在，避免空指针
    if (this.ls?.registries?.['verticals']?.length) {
      // 赋值第一个有效选项的code
      this.model = this.ls.registries['verticals'][0].code;
      // 主动触发操作
      this.changeVertical(this.model);
    }
  }

  changeVertical(model: string) {
    this.changeCategory.emit(model);
  }
}

3. 处理异步数据场景

如果ls.registries['verticals']是通过异步请求获取的（比如HTTP接口），需要在数据返回后再执行赋值操作，示例如下：

// 假设通过服务获取数据
constructor(private yourDataService: YourDataService) {}

ngOnInit(): void {
  this.yourDataService.getVerticals().subscribe(data => {
    this.ls.registries['verticals'] = data;
    if (data.length) {
      this.model = data[0].code;
      this.changeVertical(this.model);
    }
  });
}

或者使用async管道简化异步数据处理：

<select class="form-control custom-select" [(ngModel)]="model" (change)="changeVertical(model)">
  <option value=""></option>
  <option *ngFor="let vertical of ls.registries['verticals'] | async" [value]="vertical.code">
    {{vertical.name}}
  </option>
</select>

此时组件中ls.registries['verticals']应为Observable类型：

ls: { registries: { verticals: Observable<any[]> } };

constructor(private yourDataService: YourDataService) {
  this.ls.registries.verticals = this.yourDataService.getVerticals();
}

ngOnInit(): void {
  // 订阅Observable获取数据后赋值
  this.ls.registries.verticals.subscribe(data => {
    if (data.length) {
      this.model = data[0].code;
      this.changeVertical(this.model);
    }
  });
}

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