引入外键后Angular获取的后端返回对象转为数组无法访问如何解决

问题原因 #

你修改后的后端接口返回类型从单条Personen对象变成了Personen集合，和原有接口的返回结构不兼容。前端代码期望接收单个对象，实际拿到的是长度为1的数组，直接赋值给单对象变量自然无法读取到对应属性。

解决方法 #

有两种可行方案，优先推荐修改后端保持接口兼容性，无需改动前端逻辑：

方案1：调整后端接口返回单条数据 #

将ToListAsync()替换为FirstOrDefaultAsync()，同时回退返回值类型为原有的单个Personen对象，修正后代码如下：

// GET: api/Personens/5
[HttpGet("{id}")]
public async Task<ActionResult<Personen>> GetPersonen(Guid id)
{
    var personen = await _context.Personens
        .Include(p => p.Unternehmensbereich)
        .FirstOrDefaultAsync(p => p.PersonId == id);

    if (personen == null)
    {
        return NotFound();
    }

    return personen;
}

这个方案完全兼容原有前端代码，同时保留了外键关联查询的能力，也删除了原有修改代码中冗余的FindAsync查询逻辑。

方案2：修改前端适配数组返回 #

如果暂时不想调整后端，可修改前端代码取数组第一个元素赋值：

this.route.params.subscribe(params => {
  const id = params['id'];
  this.pService
    .getUser(id)
    .subscribe(data => { 
      this.person = data[0];
      console.log(this.person); 
    })
})

该方案不推荐长期使用，按唯一ID查询单条数据的接口返回数组不符合通用接口设计规范，后续维护成本更高。

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