Angular中*ngFor遍历工作经历对象列表时忽略部分字段值问题

问题排查与解决方法 #

1. 列表仅渲染2条数据的问题 #

• 你用Insomnia测试时传入的resumeId为617057308799dd688b117ce3，对应返回3条数据；但浏览器直接访问API返回的数据关联的resumeId为6170b39b0624ec1944bde78b，二者完全不同。说明前端ngOnInit中拿到的this.resumeId是后者，接口只会返回对应这个简历ID的2条数据。你可以在subscribe回调中添加console.log(allExperiences.length)确认返回数组长度，即可验证该结论。
• 排查前端resumeId的赋值逻辑，确认取到的是目标简历的ID，传给接口后即可拿到对应的3条数据。

2. 字段显示异常的问题 #

• {{ experience }}显示[Object object]属于正常现象：JS中直接输出对象会默认调用toString()方法，返回值就是该字符串，需要输出具体内容时必须指定属性名。
• 绑定experience.title、employer等字段为空的核心原因是API实际返回结构和你定义的ExperienceModel不匹配：浏览器实际返回的结构中，title、employer等业务字段不是平铺在根对象上，而是嵌套在experience子属性中，根对象仅存在_id、_userId、_resumeId三类字段，直接读取根上的业务字段自然为空。
• 两种修复方案二选一即可：
  1. 前端做数据适配：接口返回后将嵌套字段平铺，参考代码如下：

  this.experienceService.getExperiences(this.userId, this.resumeId).subscribe(
    (rawList: any[]) => { 
      this.experiences = rawList.map(item => ({
        _id: item._id,
        _userId: item._userId,
        _resumeId: item._resumeId,
        ...item.experience
      }))
    }
  );
  

  2. 调整后端接口：将experience子属性下的字段平铺到根对象返回，和Insomnia测试时的返回结构保持一致即可。
• 额外提醒：你Insomnia测试的接口返回结构和前端实际调用的接口返回结构存在差异，建议确认是否为同一个接口、是否存在参数或者版本差异导致结构不一致。

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