ASP.NET API与Angular 16项目：下拉框加载数据后显示空白

问题现象 #

已通过ASP.NET API成功获取客户数据（控制台可打印完整JSON），但Angular页面的下拉框选项显示空白，尝试async pipe后问题依旧。

核心代码 #

ASP.NET API方法

[HttpGet]
public List<RstCustomer> GetAllCustomer1()
{
    IEnumerable<RstCustomer> _List;
    _List = iunit.RstCustomerRepository.Get();
    return _List.Cast<RstCustomer>().ToList();
}

Angular服务函数

GetCustomerList(): Observable<customers[]> {
    return this.http.get<customers[]>('http://localhost:58252/api/RstCustomer/GetAllCustomer1');
}

组件订阅代码

this.service.GetCustomerList().subscribe((res:customers[])=>{
    var jsonvalue=JSON.stringify(res);
    console.log(jsonvalue);
    this.customerList=JSON.parse(jsonvalue);
});

HTML下拉框代码

<select name="CustomerID" #CustomerID="ngModel" [(ngModel)]="service.formData.CustomerID"
class="form-control" [class.is-invalid]="!isValid && service.formData.CustomerID==0">
<option value="0">-- Select Customer--</option>
<option *ngFor="let customer of customerList" [value]="customer.customerID">
{{customer.customerName}}
</option>
</select>

问题根源 #

1. 属性大小写不匹配：ASP.NET后端实体属性默认是PascalCase（如CustomerID、CustomerName），但Angular模板中使用了小写开头的customerID、customerName，导致无法正确读取字段值，选项显示空白。
2. 多余的JSON序列化/反序列化：HTTP请求返回的res已是解析完成的对象数组，手动stringify再parse属于冗余操作，可能引发隐性问题。
3. async pipe用法错误（若尝试过）：未正确将Observable绑定到模板，或依旧存在属性名不匹配问题。

解决方案 #

1. 修正属性名大小写匹配

• 确保Angular模板与后端返回的JSON字段名一致：

  <option *ngFor="let customer of customerList" [value]="customer.CustomerID">
      {{customer.CustomerName}}
  </option>
  

• 同步更新Angular的customers接口定义：

  interface customers {
      CustomerID: number;
      CustomerName: string;
      // 其他对应属性
  }
  

2. 移除冗余的JSON处理

简化组件订阅代码：

this.service.GetCustomerList().subscribe((res: customers[]) => {
    console.log(res);
    this.customerList = res;
});

3. 正确使用async pipe（可选）

若想用async pipe替代手动订阅，按以下方式修改：

• 组件代码：

  customerList$: Observable<customers[]>;
  
  ngOnInit(): void {
      this.customerList$ = this.service.GetCustomerList();
      // 初始化formData的CustomerID为0，匹配默认选项
      this.service.formData.CustomerID = this.service.formData.CustomerID ?? 0;
  }
  

• 模板代码：

  <select name="CustomerID" #CustomerID="ngModel" [(ngModel)]="service.formData.CustomerID"
  class="form-control" [class.is-invalid]="!isValid && service.formData.CustomerID==0">
  <option value="0">-- Select Customer--</option>
  <option *ngFor="let customer of customerList$ | async" [value]="customer.CustomerID">
      {{customer.CustomerName}}
  </option>
  </select>
  

4. 检查ngModel初始值

确保service.formData.CustomerID初始值为0，与默认选项的value="0"匹配，避免因初始值不合法导致的显示异常。

内容的提问来源于stack exchange，提问作者kh. kabir