Angular中使用Observable获取ASP.NET Core API数据无法正常渲染表格问题求助

看起来你遇到的问题是ASP.NET Core Web API返回的集合被序列化成了带有$id和$values的包装对象，导致Angular没法直接用*ngFor遍历。我来给你几个可行的解决思路：

问题原因 #

这种带$id和$values的格式，是因为ASP.NET Core使用的Newtonsoft.Json（或System.Text.Json的类似配置）启用了PreserveReferencesHandling选项——这个配置原本是用来处理对象循环引用的，但会把集合类型包装成包含引用标识的对象，而非直接返回原生数组。

解决方法 #

方案1：后端修改序列化配置（推荐） #

直接让API返回原生数组，从根源解决问题。根据你的.NET版本，修改配置如下：

.NET 6+（Program.cs）

builder.Services.AddControllers()
    .AddNewtonsoftJson(options =>
    {
        // 关闭引用保留，让集合直接返回数组
        options.SerializerSettings.PreserveReferencesHandling = PreserveReferencesHandling.None;
        // 如果需要保留对象间引用（避免循环引用）但不想包装集合，可改用：
        // options.SerializerSettings.PreserveReferencesHandling = PreserveReferencesHandling.Objects;
    });

.NET 5及更早（Startup.cs）

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers()
        .AddNewtonsoftJson(options =>
        {
            options.SerializerSettings.PreserveReferencesHandling = PreserveReferencesHandling.None;
        });
}

修改后，API会直接返回Oferta[]格式的JSON，Angular这边不需要额外处理，直接用*ngFor="let oferta of ofertas"就能正常渲染。

方案2：前端转换数据 #

如果暂时没法修改后端，可以在Angular的服务层把返回的包装对象转换成数组：

修改你的getOfertas方法，添加map操作符处理数据：

getOfertas(): Observable<Oferta[]> {
  return this.http.get<any>(`${this.urlWebAPI}/ofertas`)
    .pipe(
      tap(data=>console.log('OfertasService-get(): ', data) ),
      // 判断是否存在$values属性，存在则取数组，否则直接返回原数据
      map(response => response.$values ? response.$values : response),
      catchError(this.handleError)
    )
}

这样组件订阅后拿到的ofertas就是标准数组，模板里的*ngFor可以正常工作，无需修改模板代码。

额外小提示 #

看你的模板代码里，有几个列重复用了{{oferta.id}}（比如Organismo和Presupuesto列），应该是复制粘贴时的失误，记得改成对应的属性名（比如oferta.organismo、oferta.presupuesto），不然这些列会显示错误的数据。

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