Angular 无法在存储在formArray中的嵌套formGroup中显示值。获取错误，因为找不到路径为的控件：

我正在为我的web应用程序的添加和编辑页面编写代码。以下代码适用于添加页面（我在单击按钮时添加新字段），但在编辑页面（我希望在单击按钮时显示已添加的数据并添加新字段）前编写时，同样的代码会引发错误。 我参考了许多参考资料，发现他们编写了类似的代码来绑定formGroup，formGroup位于formArray中。 My item.model.ts文件

import { ItemType } from "./item-type.model";


export interface Item{
    itemCode : String,
    itemName : String,
    
    ...

    itemGroupMappings : ItemGroupDetail[],
    id : string,
     image : File,
     image_front : File,
     image_top : File
    

} 

export interface ItemGroupDetail{
   
    itemGroup :  ItemGroup,
    oemNo :  String
}

export interface ItemGroup{
  
  groupName : String
}

我的edit.component.ts文件

...
import { FormBuilder, FormControl, FormGroup , Validators, FormArray} from '@angular/forms';
import {Item, ItemGroup, ItemGroupDetail} from '../../item.model';
import {ItemService} from '../../item.service';
...

export class EditDeleteItemComponent implements OnInit {

 itemById : Item;
 editDeleteForm : FormGroup;
 itemCode :String;
 addItemGroupMappingForm : FormGroup;
 itemGroupDetail : ItemGroupDetail;


constructor(private http : HttpClient, private itemService : ItemService, private formBuilder : 
    FormBuilder,private route : ActivatedRoute ){}

  ngOnInit(): void {

    this.itemCode = this.route.snapshot.params["id"];
    this.itemService.getItemById(this.itemCode)
    .subscribe( (post : Item) =>
      {
        this.itemById = post;
        this.editItem(post);
        console.log(post);
        console.log(post.itemGroupMappings.length)
      }
    );

      this.addItemGroupMappingForm = this.formBuilder.group({
      'itemGroup' : new FormGroup({

        'groupName' : new FormControl('')

      }),
      'oemNo' : new FormControl('')
    })

    this.editDeleteForm = this.formBuilder.group({

      'itemCode' : new FormControl(),
      'itemName' : new FormControl(),

      //'itemGroupMappings' : this.formBuilder.array([this.addItemGroup()])
   
      'itemGroupMappings' : this.formBuilder.array([this.itemGroupDetail])
   
   

  });
}

addItemGroup() : FormGroup
  {
    return this.formBuilder.group(
      {
        'itemGroup' : new FormGroup({
          'groupName' : new FormControl('')
        }),
        'oemNo' : new FormControl('')
      }
    )
  
  }


editItem(item : Item)
  {
    this.editDeleteForm.patchValue({

      itemCode : item.itemCode,
      itemName  : item.itemName,
     
  });

    this.editDeleteForm.setControl('itemGroupMappings', 
    this.setExistingGroupMappings(this.itemById.itemGroupMappings));
   
    }


setExistingGroupMappings(mappings : ItemGroupDetail[]) : FormArray
  {
    const formArray = new FormArray([]);

    mappings.forEach( s => {
     formArray.push( this.formBuilder.group({

        itemGroup : s.itemGroup,
        oemNo : s.oemNo

             }
           ) 
        );

        console.log(s.itemGroup.groupName);
    }
    
    );

    return formArray;
   

  }

 

  getItemGroupDetailControls()
  {  
    console.log(<FormArray>this.editDeleteForm.get('itemGroupMappings').value);
    return (<FormArray>this.editDeleteForm.get('itemGroupMappings')).controls;

  } 



  onAddButtonClick()
  {
   
   (<FormArray>this.editDeleteForm.get('itemGroupMappings')).push(this.addItemGroup());
    

  }

 ...
 }

---

显示oemNo时没有错误，但当我尝试显示groupName字段时，我得到的错误是“找不到控制路径”。

<mat-grid-tile>
  <div formArrayName= "itemGroupMappings" class="ScrollStyle">

    <div *ngFor="let itemGroupMappingControl of getItemGroupDetailControls(); let i = index"  [formGroupName]= "i" >  
      
      <mat-form-field>
        <div formGroupName="itemGroup">
            <mat-label  >Group Name</mat-label>
             <input matInput type ="text" placeholder="" name="groupName" autocomplete="off" 
                  formControlName="groupName" class="form-control" >
          </div> 
      </mat-form-field>

   <mat-form-field>

    <mat-label >Oem Nos.</mat-label>

      <input  matInput type ="text" placeholder="" name="oemNo" autocomplete="off" 
            formControlName="oemNo" class="form-control" >

   </mat-form-field> 
    
 
   </div> 

  </div>

</mat-grid-tile>

 <mat-form-field>
        <div formGroupName="itemGroup">
            <mat-label  >Group Name</mat-label>
             <input matInput type ="text" placeholder="" name="groupName" autocomplete="off" 
                  formControlName="groupName" class="form-control" >
          </div> 
      </mat-form-field>

Object

itemCode: "DUMMY01"

itemName: "DUMMY01"

itemGroupMappings: Array(2)
0:
itemGroup: {groupId: "G01", groupName: "Group1"}

itemGroupDetailId: {itemCode: "DUMMY01", groupName: "Group1"}

oemNo: "87088800"

__proto__: Object

1: {itemGroupDetailId: {…}, itemGroup: {…}, oemNo: "1001101"}
length: 2


__proto__: Object