Angular 8中HTTP请求后下拉选择框默认值为空的原因？

看起来你遇到的是Angular中异步数据绑定后下拉框未更新的典型问题，我来帮你分析下可能的原因和解决方案：

1. 数据类型不匹配（最常见原因） #

控制台能看到值，但下拉框没选中，大概率是服务返回的ID类型和你绑定的selectedChocolateId类型不一致。比如服务返回的是字符串格式的数字（比如"1"），但你的selectedChocolateId定义的是number类型，这时候[ngValue]绑定的是数字1，和字符串"1"无法匹配，导致默认值为空。

解决方法：在赋值时把返回值转为数字类型：

ngOnInit() {
  this._chocolateService.GetChocolateId().subscribe(data => {
    // 把返回值转为number类型
    this.selectedChocolateId = Number(data);
    // 或者用 +data 简写：this.selectedChocolateId = +data;
  })
}

2. 异步操作导致变更检测未触发 #

如果你的HTTP服务是在Angular的NgZone外部执行的（比如某些第三方HTTP库或者自定义异步逻辑），Angular的变更检测机制不会自动感知到数据变化，这时候即使你赋值了，视图也不会更新。

解决方法：手动触发变更检测，或者用NgZone包裹赋值操作：

// 先导入NgZone
import { NgZone } from '@angular/core';

// 构造函数注入NgZone
constructor(private _chocolateService: ChocolateService, private zone: NgZone) {}

ngOnInit() {
  this._chocolateService.GetChocolateId().subscribe(data => {
    this.zone.run(() => {
      this.selectedChocolateId = Number(data);
    });
  })
}

3. 添加trackBy函数优化选项识别 #

虽然你的chocolates数组是静态的，但添加trackBy函数可以帮助Angular更准确地跟踪选项的身份，避免因DOM重新渲染导致的选中状态丢失：

HTML代码修改：

<select class="form-control" name="chocolate" [(ngModel)]="selectedChocolateId">
  <option *ngFor="let chocolate of chocolates; trackBy: trackById" [ngValue]="chocolate.id"> 
    {{chocolate.name}} 
  </option>
</select>

TypeScript中添加trackBy方法：

trackById(index: number, chocolate: {id: number, name: string}): number {
  return chocolate.id;
}

4. 初始化selectedChocolateId #

可以给selectedChocolateId一个初始值（比如null），避免初始状态下的undefined可能带来的绑定问题：

public selectedChocolateId: number | null = null;

你可以先从检查数据类型开始排查，这是最常见的问题，应该能解决你的情况。

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