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

如何解决无法在存储在 formArray 中的嵌套 formGroup 中显示值获取错误为找不到路径控制：

我正在编写用于添加和编辑 Web 应用程序页面的代码。以下代码适用于添加页面（我在按钮单击时添加新字段），但是当我在编辑页面之前编写它时（我想显示已添加的数据并在按钮单击时添加新字段），相同的代码会引发错误。 我参考了很多资源，发现他们写了类似的代码来绑定formArray里面的formGroup。 我的 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());
    

  }

 ...
 }

我的 edit.html 文件

<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>

我在 edit.html 页面中获得了之前添加的所有 oemNos。（添加到我的 add.html 页面中），但是当我尝试显示 groupName 时出现以下错误。

** 找不到带有路径的控件：'itemGroupMappings -> 0 -> itemGroup -> groupName **

请建议我错过了什么。我最近开始在 angular 工作，所以我不太确定我哪里出错了。 下面也是我通过执行 console.log 找到的 json。

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