Angular 11中SejourItem的prods:rowState属性异常挂载到父对象外及数组元素结构异常问题排查

这种情况几乎不可能是TypeScript的bug——毕竟你在StackBlitz的纯净环境里能正常运行，问题大概率出在你的Angular项目的特定配置、代码逻辑或者依赖库上。我帮你梳理几个最可能的原因和排查方向：

1. 表单控件的包装结构是头号嫌疑 #

如果stayToPrepare是从Angular表单（FormGroup/FormControl）中获取的值，很可能是表单结构导致了额外的sejourItem嵌套。比如你可能在定义表单时，把SejourItem的所有字段包裹在了一个名为sejourItem的FormGroup里：

// 错误示例：表单结构导致的嵌套
this.stayForm = this.formBuilder.group({
  sejourItem: this.formBuilder.group({
    ROWID: [''],
    Sequence: [0],
    // ...其他SejourItem字段
  })
});

这时候如果直接用this.stayForm.value作为stayToPrepare传入函数，得到的对象就会是{ sejourItem: {...} }的结构。当你给它添加prods:rowState属性时，自然就会出现在外层，而不是sejourItem内部。

排查方法：在调用prepareBody前打印原始对象：

console.log('原始stay对象:', JSON.stringify(stayToPrepare, null, 2));

如果原始对象已经有sejourItem键，那只需要取stayToPrepare.sejourItem传入函数即可。

2. HTTP拦截器在暗中修改请求体 #

你的项目里如果配置了自定义HTTP拦截器，可能拦截器在发送请求前对请求体做了包装转换。比如有些团队会统一给请求体添加固定的外层结构，或者修改属性位置：

@Injectable()
export class RequestWrapperInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 示例：拦截器自动给请求体添加sejourItem包装
    const modifiedBody = { sejourItem: req.body };
    const modifiedReq = req.clone({ body: modifiedBody });
    return next.handle(modifiedReq);
  }
}

这种情况下，即使你在prepareBody里生成的结构是对的，拦截器也会给你套一层sejourItem，同时把prods:rowState留在外层。

排查方法：检查app.module.ts或其他模块中的HTTP_INTERCEPTORS提供者，看看有没有类似的转换逻辑。

3. 对象复制/转换时的意外嵌套 #

如果stayToPrepare是通过复制、转换其他对象得到的（比如用Object.assign、扩展运算符，或者lodash的cloneDeep），可能在转换过程中不小心造成了嵌套。比如：

// 错误示例：复制时意外嵌套
const originalStay = getSomeStayData();
const stayToPrepare = { sejourItem: { ...originalStay } }; // 这里多套了一层

或者使用了class-transformer这类库，装饰器配置错误导致序列化结构改变。

排查方法：追溯stayToPrepare的生成逻辑，检查每一步的对象结构。

4. 状态管理库的包装影响 #

如果你的项目用了NgRx、Akita等状态管理库，从store中获取的对象可能被库包装过，带有额外的属性或嵌套结构。比如有些库会给实体对象添加元数据，或者用特定的结构存储。

排查方法：检查从store中获取数据的代码，看看返回的原始对象结构是否符合预期。

快速验证思路 #

你可以在prepareBody函数里手动创建一个纯SejourItem对象，看看序列化结果是否正常：

private prepareBody(query: string): Sejour {
  query = query.toUpperCase();
  // 手动创建一个纯SejourItem
  const testStay: SejourItem = {
    ROWID: "test",
    Sequence: 1,
    NoSejour: "test-sejour",
    // ...其他必填字段
    SejourCloture: false
  };
  testStay['prods:rowState'] = 'created';
  let preparedStay: Sejour = {} as Sejour;
  switch (query) {
    case 'POST':
      preparedStay = {
        dsAdvSejour: {
          'prods:hasChanges': true,
          ttSejour: [testStay],
          'prods:before': {},
        },
      };
      break;
  }
  console.log('测试序列化结果:', JSON.stringify(preparedStay, null, 2));
  return preparedStay;
}

如果这个测试结果是正常的，那100%是你传入的stayToPrepare对象本身结构有问题，而非prepareBody函数的逻辑错误。

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