Angular中如何按列索引将响应ID传入ArrayListID字段？

核心问题1：数据结构不匹配 #

你定义的names是Names[]（一维对象数组），但实际数据是二维数组（外层数组包含一个内部数组，内部数组才是对象集合）。直接遍历this.names[i]拿到的是内部数组，而非目标对象，自然无法赋值ArrayListID。

核心问题2：异步请求的覆盖与对应关系错误 #

for...of循环中发起的PostID请求是异步的，全局变量responseID会被后续请求的返回值覆盖，导致所有names元素被设置为最后一个response.id；同时你没有建立formGroup.value中每个id与names元素的对应关系，导致赋值逻辑混乱。

解决方案 #

步骤1：修正数据结构（二选一）

• 如果names应该是一维对象数组：
  确保初始化或赋值时将其改为一维结构，比如：

  // 正确的一维结构
  names: Names[] = [
    { ArrayListID: 0, itemName: "TEST001A" },
    { ArrayListID: 0, itemName: "TEST001B" }
  ];
  

• 如果确实需要保留二维结构：
  使用flat()方法将其扁平化，或者直接遍历内部数组：

  // 扁平化二维数组为一维
  const targetNames = this.names.flat();
  

步骤2：修正异步请求与赋值逻辑

通过索引建立formGroup.value的id与names元素的对应关系，避免异步覆盖：

onSave() {
  // 处理二维数组（如果需要），否则直接用this.names
  const targetNames = this.names.flat();
  // 确保formGroup.value的长度与targetNames一致
  if (this.formGroup.value.length !== targetNames.length) {
    console.warn("ID数量与names元素数量不匹配");
    return;
  }

  this.formGroup.value.forEach((id, index) => {
    this.services.PostID(id).subscribe((response) => {
      // 用index对应到目标元素
      const targetItem = targetNames[index];
      if (targetItem) {
        targetItem.ArrayListID = response.id;
        // 提交修改后的元素
        this.services.PostArray(targetItem).subscribe((res) => {
          console.log(res);
        });
      }
    });
  });
}

可选优化：避免嵌套订阅（推荐）

嵌套订阅会导致回调地狱，可使用RxJS的switchMap操作符优化：

import { switchMap } from 'rxjs/operators';

onSave() {
  const targetNames = this.names.flat();
  if (this.formGroup.value.length !== targetNames.length) {
    console.warn("ID数量与names元素数量不匹配");
    return;
  }

  this.formGroup.value.forEach((id, index) => {
    this.services.PostID(id).pipe(
      switchMap((response) => {
        const targetItem = targetNames[index];
        targetItem.ArrayListID = response.id;
        return this.services.PostArray(targetItem);
      })
    ).subscribe((res) => {
      console.log(res);
    });
  });
}

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