Angular中如何展示.NET Core控制器返回的元组对象？

.NET Core返回的ValueTuple在默认JSON序列化逻辑下，会被序列化为包含Item1、Item2属性的对象（例如{"Item1":"value 2","Item2":"value 3"}），但你在Angular接口中定义的val2and3是数组类型的元组[string, string]，两者格式不匹配，导致HttpClient无法正确解析该字段，最终显示为空对象或undefined。

可从.NET端或Angular端任选一种方式调整，让数据格式匹配：

方式一：修改.NET Core控制器，返回数组格式 #

将ValueTuple替换为数组，序列化后直接匹配Angular期望的数组结构：

[Route("api/[controller]")]
[ApiController]
public class TestController : ControllerBase
{
    [HttpGet]
    public IActionResult Test()
    {
        return Ok(new {
            val1 = "value 1",
            val2and3 = new[] { "value 2", "value 3" } // 替换为数组
        });
    }
}

此方式无需改动Angular代码，原接口定义可直接正常解析数据。

方式二：修改Angular接口适配.NET序列化格式 #

若不想改动.NET代码，可调整Angular接口结构适配返回的对象，之后按需转换为元组：

1. 更新接口定义：

export interface TestInterface {
  val1: string;
  val2and3: { Item1: string; Item2: string }; // 匹配.NET序列化后的对象结构
}

2. 在数据获取流程中转换为元组（可选）：

getTest(): Observable<{ val1: string; val2and3: [string, string] }> {
  const data$ = this.httpClient
    .get<TestInterface>(this.baseUrl + 'api/Test');

  return data$.pipe(
    map(data => ({
      val1: data.val1,
      val2and3: [data.val2and3.Item1, data.val2and3.Item2] as [string, string]
    })),
    tap(data => console.log(JSON.stringify(data)))
  );
}

方式三：配置.NET Core的JSON序列化规则（进阶） #

若坚持使用ValueTuple，可配置.NET的JSON序列化器，让ValueTuple直接序列化为数组：
在.NET 6+的Program.cs中添加以下配置：

builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.TupleSerializationPolicy = System.Text.Json.Serialization.JsonTupleSerializationPolicy.Array;
    });

配置完成后，原控制器返回的ValueTuple会被序列化为["value 2","value 3"]，Angular端无需修改即可正常解析。

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