Angular传personId查询后端接口无法获取对应personentypId如何解决

问题原因 #

• 后端查询逻辑错误：EF Core的FindAsync()是用来匹配表主键的方法，你当前传入接口的是personId字段值，并不是映射表的主键，自然查询不到匹配记录返回404。
• 前后端方法名不匹配：服务层定义的查询方法名为getUser，但组件中调用的是getTypeId，方法不存在会直接抛出错误。
• 返回类型不匹配：前端服务声明接口返回Zuordungsmodel[]数组类型，但后端接口返回的是单个Personentypzuordnungen对象，类型不一致会导致解析失败。
• 模型字段名不匹配：后端返回的字段名为personentypId，但前端Zuordungsmodel中定义的字段名为personTypId，大小写不一致会导致取值为空。
• 可选路由问题：如果后端接口没有配置[HttpGet("{id}")]路由特性，也会出现404无法匹配接口地址的问题。

解决步骤 #

1. 修正后端查询逻辑 #

将主键查询改为按personId字段过滤，代码修改如下：

// 记得先引入命名空间：using Microsoft.EntityFrameworkCore;
public async Task<ActionResult<Personentypzuordnungen>> GetPersonentypzuordnungen(Guid id){
    var personentypzuordnungen = await _context.Personentypzuordnungens.FirstOrDefaultAsync(x => x.personId == id);

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

2. 确认后端路由配置 #

确保控制器和接口方法添加了正确的路由特性：

[ApiController]
[Route("api/[controller]")]
public class PersonentypzuordnungensController : ControllerBase
{
    [HttpGet("{id}")] // 必须添加该特性匹配路径参数
    public async Task<ActionResult<Personentypzuordnungen>> GetPersonentypzuordnungen(Guid id)
    {
        // 上述查询逻辑
    }
}

3. 修正前端代码 #

修正服务层方法名和返回类型

readonly zController = 'http://localhost:5000/api/Personentypzuordnungens/';

// 方法名和组件调用保持一致，返回类型改为单个对象不是数组
getTypeId(userid: string){
   console.log(this.zController + userid);
   return this.http.get<Zuordungsmodel>(this.zController + userid);
}

修正前端模型字段名

export interface Zuordungsmodel {
   personId: string;
   personentypId: string; // 和后端返回字段名保持一致        
}

组件调用代码无需修改

this.route.params.subscribe(params => {
     const id = params['id'];
     this.zService
          .getTypeId(id)
          .subscribe(data => { this.person = data; })
});

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