Angular下拉框无法默认选中首个选项问题求助

1. 移除ngModel避免表单冲突 #

Angular中响应式表单（formControlName）与ngModel同时使用易引发数据同步冲突，先删除模板中的双向绑定代码：

修改后的HTML代码：

<div class="col-sm-10">
<select class="form-select" formControlName="categoryId">
<option *ngFor="let c of categories" [value]="c.id">
{{c.name}}
</option>
</select>
</div>

2. 异步获取分类后设置默认选中项 #

分类数据从服务器异步加载，需在数据返回后将表单的categoryId设为首个分类的ID：

修改后的组件代码：

categories: Category[] = [];
category!: Category;

formNewProduct: FormGroup = new FormGroup({});
constructor(private formBuilder: FormBuilder, private productService: ProductService,
private router: Router, private alertService: AlertService, public validationService: ValidationService
, private categoryService: CategoryService) { }

ngOnInit(): void {
  this.formNewProduct = this.formBuilder.group({
    name: [''],
    description: [''],
    photoUrl: [''],
    price: [''],
    categoryId: ['']
  }) 

  this.getAllCategories();

  this.category = this.categoryService.getCategory();
}

getAllCategories(){
  this.categoryService.getAllCategories().subscribe((res)=>{
    this.categories = res;
    // 分类列表非空时，设置第一个分类为默认选项
    if(this.categories.length > 0){
      this.formNewProduct.get('categoryId')?.setValue(this.categories[0].id);
      this.category = this.categories[0];
    }
  })
}

3. （可选）优先使用本地存储的分类 #

如果希望优先保留本地存储的分类（而非强制首个），可添加判断逻辑：

修改getAllCategories中的默认值设置逻辑：

getAllCategories(){
  this.categoryService.getAllCategories().subscribe((res)=>{
    this.categories = res;
    let defaultCategoryId: number | undefined;
    // 检查本地存储的分类是否存在于当前列表中
    if(this.category.id){
      const savedCategory = this.categories.find(c => c.id === this.category.id);
      if(savedCategory){
        defaultCategoryId = savedCategory.id;
      }
    }
    // 无有效本地分类时，使用第一个分类
    if(!defaultCategoryId && this.categories.length > 0){
      defaultCategoryId = this.categories[0].id;
      this.category = this.categories[0];
    }
    // 更新表单值
    if(defaultCategoryId){
      this.formNewProduct.get('categoryId')?.setValue(defaultCategoryId);
    }
  })
}

核心要点 #

• 必须在异步数据加载完成后设置默认值，确保分类列表已初始化
• 移除ngModel消除响应式表单的绑定冲突
• 保证默认选中逻辑依赖分类数据的加载状态

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