Angular技术问题：如何将数据存入索引0而非索引1

操作步骤：

• 打开对话框前填写qty值
• 在对话框中输入内容并提交
• 提交后数据被存入数组的索引1，而非预期的索引0

问题分析 #

从代码逻辑来看，问题根源有两处：

1. 父组件表单数组初始化：SArray默认初始化了一个空表单组[this.CreateQtyRow('')]，直接占据了索引0的位置，后续用push添加新数据时自然从索引1开始。
2. 子组件qty值订阅逻辑：arrayForm初始已包含一个表单组，但qty值变化时直接循环push新项，未处理已有项，可能导致数组出现多余条目。

解决方案 #

1. 父组件：替换索引0内容而非追加 #

将父组件对话框关闭后的push操作改为替换索引0的表单组，或者清空初始空项后再添加数据：

dialogRef.afterClosed().subscribe((result) => {
  // 方案一：直接替换索引0的内容（适合仅需单条数据的场景）
  if (result?.arrayForm?.length > 0) {
    this.SArray.at(0).patchValue({ NameData: result.arrayForm[0].qtyRow });
  }

  // 方案二：清空初始空项后添加新数据（适合多条数据的场景）
  // this.SArray.clear();
  // result.arrayForm.forEach(item => {
  //   this.SArray.push(this.CreateQtyRow(item.qtyRow));
  // });
});

2. 子组件：修复qty值订阅逻辑 #

子组件中arrayForm已有初始项，当qty值变化时，先清空现有数组再重新创建对应数量的表单组，避免重复添加：

this.form.get('qty').valueChanges.subscribe((res) => {
  const arrayForm = this.form.get('arrayForm') as FormArray;
  arrayForm.clear();
  for (let i = 0; i < res; i++) {
    arrayForm.push(this.CreateArray());
  }
});

修改后的完整关键代码 #

子组件关键代码

this.form = this.fb.group({
  id: [],
  Name:['', Validators.required],
  qty:[0, Validators.required],
  arrayForm: this.fb.array([this.CreateArray()]),
});
this.form.get('qty').valueChanges.subscribe((res) => {
  const arrayForm = this.form.get('arrayForm') as FormArray;
  arrayForm.clear();
  for (let i = 0; i < res; i++) {
    arrayForm.push(this.CreateArray());
  }
});

CreateArray(){
  return this.fb.group({
    qtyRow: ['',Validators.required]
  });
}

onSave(){  
  this.dialogRef.close(this.form.value)
}

父组件关键代码

openDialogChildComponent(index: number){
  let dialogRef = this.dialog.open(ChildComponent, {
    autoFocus: false,
    maxHeight: '90vh',
    data:{
      qty:this.form.value[index].qty
    }
  })
  
  dialogRef.afterClosed().subscribe((result) => {
    if (result?.arrayForm?.length) {
      this.SArray.at(0).patchValue({ NameData: result.arrayForm[0].qtyRow });
    }
  });
}

this.Form = this.formBuilder.group({
  id : [0],
  Details:[''],
  SArray: this.formBuilder.array([this.CreateQtyRow('')])
})

CreateQtyRow(data): FormGroup {
  return this.formBuilder.group({
    NameData:[data]
  })
}

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