Angular如何接收解析Web API返回的多对象并解决属性undefined问题

你遇到的报错本质是C#后端返回的JSON结构没有包含sampleMeta和log字段，导致Angular端解析后访问属性为undefined，具体原因和修复方法如下：

• 核心问题：C#的ParsedExpData类定义中，sampleMeta和log是公共字段，而非公共属性。ASP.NET Core 默认的JSON序列化器（System.Text.Json）仅会序列化公共属性，不会序列化公共字段，因此返回给前端的JSON是空对象。
• 修复方案1（推荐）：将ParsedExpData的字段改为带get/set访问器的公共属性，修改后代码如下：

public class ParsedExpData
{
    public ParsedSampleMetadata[] sampleMeta { get; set; }
    public string log { get; set; }

    public ParsedExpData(ParsedSampleMetadata[] sm, string l)
    {
        sampleMeta = sm;
        log = l;
    }
}

• 修复方案2（不推荐）：如果要保留字段定义，可在Program.cs中配置JSON序列化器允许序列化公共字段：

builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.IncludeFields = true;
    });

• 验证建议：修复后端代码后，可在Angular的subscribe回调中先打印返回数据确认结构：

.subscribe(
  data => {
    console.log('后端返回数据：', JSON.stringify(data)); // 确认存在sampleMeta字段
    this.tableDataSource1.data = data.sampleMeta;
    // 其余逻辑
  }
)

• 可选优化：Angular端的ParsedExpData无需定义为class，使用interface即可，因为HttpClient返回的是普通JSON对象，不会自动实例化你定义的class：

export interface ParsedExpData {
  sampleMeta: ParsedSampleMetadata[];
  log: string;
}

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