微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

无法获取 FormArray 的所有元素，但是在 json 中，这两行都被正确获取

分类：编程问答

如何解决无法获取 FormArray 的所有元素，但是在 json 中，这两行都被正确获取

我试图显示包含 FormGroup 的 FormArray 中的所有元素，但只有第一行被多次提取。请建议我哪里出错了。我最近开始使用 angular，所以找不到我的错误。 这是我的模型课。

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


export interface Item{
    itemCode : String,itemName : String,alias : String,jtbCode : String,hsnCode : String,uom : String,barCode : String,jtbLocation : String,rthmLocation : String,uttLocation : String,procmethodJtb : String,procmethodRthm : String,procmethodUtt : String,jtbMultiplier: String,estimatedPrice : String,minInventory : String,itemCategory : String,itemType : ItemType;
    itemStatus : String,managedBy : String,// itemGroup : ItemGroup,oemNos : String,materialType : String,//itemGroupMappings : ItemGroupDetail[]
    itemGroupMappings : ItemGroupDetail[],id : string,image : File,image_front : File,image_top : File
    

} 

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

export interface ItemGroup{
  groupName : String
}

我的 ts 文件

import { HttpClient } from '@angular/common/http'
import { Component,OnInit } from '@angular/core';
import { FormBuilder,FormControl,FormGroup,Validators,FormArray} from '@angular/forms';
import {Item,ItemGroup,ItemGroupDetail} from '../../item.model';
import {ItemService} from '../../item.service';
import {ActivatedRoute} from '@angular/router';



@Component({
  selector: 'app-edit-delete-item',templateUrl: './edit-delete-item.component.html',styleUrls: ['./edit-delete-item.component.css']
})
export class EditDeleteItemComponent implements OnInit {

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



  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)
      }
    );

 
 

    this.editDeleteForm = this.formBuilder.group({

      'itemCode' : new FormControl(),'itemName' : new FormControl(),'alias'    : new FormControl(),'jtbCode'    : new FormControl(),'hsnCode'    : new FormControl(),'uom'    : new FormControl(),'barcode'    : new FormControl(),'jtbLocation'    : new FormControl(),'rthmLocation'    : new FormControl(),'uttLocation'    : new FormControl(),'procmethodJtb'    : new FormControl(),'procmethodRthm'    : new FormControl(),'procmethodUtt'    : new FormControl(),'jtbMultiplier'    : new FormControl(),'estimatedPrice'    : new FormControl(),'minInventory'    : new FormControl(),'itemCategory'    : new FormControl(),'itemType'    : new FormControl(),'itemStatus'    : new FormControl(),'managedBy'    : new FormControl(),// 'itemGroup'    : new FormControl(null),//  'oemNos'    : new FormControl(null),'materialType'    : new FormControl(),'image' : new FormControl(),'image_front' : new FormControl(),'image_top' : new FormControl(),'itemGroupMappings' : this.formBuilder.array([this.addItemGroup()])
   
     
   
    //  });

  });
}

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

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

      itemCode : item.itemCode,itemName  : item.itemName,alias : item.alias,jtbCode : item.jtbCode,hsnCode : item.hsnCode,uom : item.uom,barcode : item.barCode,jtbLocation : item.jtbLocation,rthmLocation : item.rthmLocation,uttLocation : item.uttLocation,procmethodJtb : item.procmethodJtb,procmethodRthm : item.procmethodRthm,procmethodUtt : item.procmethodUtt,jtbMultiplier : item.jtbMultiplier,estimatedPrice : item.estimatedPrice,minInventory : item.minInventory,itemCategory : item.itemCategory,itemType : item.itemType,itemStatus : item.itemStatus,managedBy : item.managedBy,materialType : item.materialType,})
    this.editDeleteForm.get('itemGroupMappings').patchValue(item.itemGroupMappings)
  }

 

  getItemGroupDetailControls()
  {



  

  return (<FormArray>this.editDeleteForm.get('itemGroupMappings')).controls;

  

  }

我的 html 文件看起来像

<h1 role="banner" style="background-color: darkgrey; text-align: center;">Add Item</h1>

<div class="centered">

<mat-grid-list cols="3" rowHeight="60px" gutterSize="0px"> 
   <div *ngIf="itemById!=null">
 <form [formGroup] = "editDeleteForm" (ngSubmit)="onSubmit()"  >
 
  
 <mat-grid-tile>
   <mat-form-field >
     <mat-label >Item Code</mat-label>
   <input matInput type="text" placeholder=""  name = "itemCode" autocomplete="off" style="margin-right: 10px;"
   formControlName="itemCode" class="form-control" >
 </mat-form-field>
 </mat-grid-tile>
 <mat-grid-tile>
   <mat-form-field >
     <mat-label >Item Name</mat-label>
     <input matInput type ="text" placeholder=""  name="itemName" autocomplete="off" 
     style="padding-left: 10px;" class="form-control" 
     formControlName="itemName" id="itemCode" >
   </mat-form-field>
 </mat-grid-tile>
 <mat-grid-tile>
   <mat-form-field >
   <mat-label>Alias</mat-label>
   <input matInput type ="text" placeholder="" name = "alias" autocomplete="off" 
   formControlName="alias" 
   class="form-control" >
 </mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
 <mat-form-field >
   <mat-label>JTB Code</mat-label>
   <input matInput type ="text" placeholder="" name="jtbCode" autocomplete="off" 
   formControlName="jtbCode" class="form-control" >
 </mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
 <mat-form-field class="">
   <mat-label>HSN Code</mat-label>
   <input matInput type ="text" placeholder="" name="hsnCode" autocomplete="off" 
   formControlName="hsnCode" class="form-control" >
 </mat-form-field> 
</mat-grid-tile>
<mat-grid-tile>
 <mat-form-field >
    <mat-label>UOM</mat-label>
     <input matInput type ="text" placeholder="" name="uom" autocomplete="off" 
     formControlName="uom" class="form-control" >
 </mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
 <mat-form-field class="">
   <mat-label>Barcode</mat-label>
   <input matInput type ="text" placeholder="" name="barcode" autocomplete="off"
   formControlName="barcode"  class="form-control" >
 </mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
 <mat-form-field class="">
   <mat-label>JTB Location</mat-label>
   <input matInput type ="text" placeholder="" name="jtblocation" autocomplete="off" 
   formControlName="jtbLocation" class="form-control" >
 </mat-form-field> 
</mat-grid-tile>
<mat-grid-tile>

 <mat-form-field class="">
   <mat-label>RTHM Location</mat-label>
   <input matInput type ="text" placeholder="" name="rthmlocation" autocomplete="off" 
   formControlName="rthmLocation" class="form-control" >
 </mat-form-field>
 
</mat-grid-tile>

<mat-grid-tile>
 <mat-form-field class="">
   <mat-label>UTT Location</mat-label>
   <input matInput type ="text" placeholder="" name="uttlocation" autocomplete="off" 
   formControlName="uttLocation" class="form-control" >
 </mat-form-field> 
</mat-grid-tile>

<mat-grid-tile>
 <mat-form-field class="">
   <mat-label>Procument Method JTB</mat-label>
   <input matInput type ="text" placeholder="" name="procmethodJtb" autocomplete="off" 
   formControlName="procmethodJtb" class="form-control" >
 </mat-form-field>
</mat-grid-tile>

<mat-grid-tile>

 <mat-form-field class="">
   <mat-label>Procument Method RTHM</mat-label>
   <input matInput type ="text" placeholder="" name="procmethodRthm" autocomplete="off" 
   formControlName="procmethodRthm" class="form-control" >
 </mat-form-field>
</mat-grid-tile>

<mat-grid-tile>

 <mat-form-field class="">
   <mat-label>Procument Method UTT</mat-label>
   <input matInput type ="text" placeholder="" name="procmethodUtt" autocomplete="off" 
   formControlName="procmethodUtt" class="form-control" >
 </mat-form-field>
</mat-grid-tile>

<mat-grid-tile>
 <mat-form-field class="">
   <mat-label>JTB Multiplier</mat-label>
   <input matInput type ="text" placeholder="" name="jtbMultiplier" autocomplete="off" 
   formControlName="jtbMultiplier" class="form-control" >
 </mat-form-field>
</mat-grid-tile>

<mat-grid-tile>
 <mat-form-field class="">
   <mat-label>Estimated Price</mat-label>
   <input matInput type ="text" placeholder="" name="estimatedPrice" autocomplete="off" 
   formControlName="estimatedPrice" class="form-control" >
 </mat-form-field>
</mat-grid-tile>

<mat-grid-tile>
 <mat-form-field class="">
   <mat-label>Minimum Inventory</mat-label>
   <input matInput type ="text" placeholder="" name="minInventory" autocomplete="off" 
   formControlName="minInventory"  class="form-control" >
 </mat-form-field>
</mat-grid-tile>

<mat-grid-tile>
 <mat-form-field class="">
   <mat-label>Item Category</mat-label>
   <input matInput type ="text" placeholder="" name="itemCategory" autocomplete="off" 
   formControlName="itemCategory" class="form-control" >
 </mat-form-field>

</mat-grid-tile>

<mat-grid-tile>
 <mat-form-field class="">
   <mat-label>Item Type</mat-label>
   <input matInput type ="text" placeholder="" name="itemType" autocomplete="off" 
   formControlName="itemType" class="form-control" >
 </mat-form-field>
</mat-grid-tile>

<mat-grid-tile>
 <mat-form-field class="">
   <mat-label>Item Status</mat-label>
   <input matInput type ="text" placeholder="" name="itemStatus" autocomplete="off" 
   formControlName="itemStatus" class="form-control" >
 </mat-form-field>   
</mat-grid-tile>

<mat-grid-tile>
 <mat-form-field class="">
   <mat-label>Managed By</mat-label>
   <input matInput type ="text" placeholder="" name="managedBy" autocomplete="off"
   formControlName="managedBy"  class="form-control" >
 </mat-form-field>
</mat-grid-tile>

<mat-grid-tile>
 <mat-form-field class="">
   <mat-label>Material Type</mat-label>
   <input matInput type ="text" placeholder="" name="materialType" autocomplete="off" 
   formControlName="materialType" class="form-control" >
 </mat-form-field>
</mat-grid-tile>
<mat-grid-tile></mat-grid-tile>




   
  <mat-grid-tile [colspan]="3" [rowspan]="4">
 <div formArrayName="itemGroupMappings" class="ScrollStyle">

   <!-- <button mat-raised-button color="primary"  type="button" (click)="onAddButtonClick()" >Add group and OEM nos.</button> -->
   
   <div *ngFor="let x of itemById.itemGroupMappings; let m = index" > 
 <div *ngFor="let itemGroupMappingControl of getItemGroupDetailControls(); let i = index" [formGroupName] = "i" >
   
  
     
       
         <mat-form-field>
           
           
          <div class="form-group" 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>
      <div>
      <mat-label>Oem Nos.</mat-label>
        <input  matInput type ="text" placeholder="" name="oemNo" autocomplete="off" 
      formControlName="oemNo" class="form-control" >
    </div>
    </mat-form-field>
    <button mat-raised-button color="warn"  type="button" (click)="onDeleteClick(i)" >Delete Group</button>
    
     </div>

   
 
   </div>
 </div> 
   
 
<!-- </div>-->
 
</mat-grid-tile>

<mat-grid-tile></mat-grid-tile> 

 <mat-grid-tile>
   
   <button mat-raised-button color="accent" [disabled]="!editDeleteForm.valid">Edit</button>
 </mat-grid-tile>

 <!-- <mat-grid-tile>
   
   <button mat-raised-button color="accent" [disabled]="!editDeleteForm.valid" (click)="onReset()">Reset</button>
 </mat-grid-tile> -->



</form>
</div>
</mat-grid-list>


</div>

这是我在执行 console.log 时得到的 json

{itemCode: "DUMMY05",itemName: "DUMMY05",alias: null,jtbCode: null,hsnCode: null,…}
alias: null
barCode: null
estimatedPrice: 0
hsnCode: null
image1: null
image2: null
image3: null
itemCategory: null
itemCode: "DUMMY05"
itemGroupMappings: Array(2)
0:
itemGroup: {groupId: "G01",groupName: "JCB"}
itemGroupDetailId:
groupName: "JCB"
itemCode: "DUMMY05"
__proto__: Object
oemNo: "90199191"
__proto__: Object
1:
itemGroup: {groupId: "G03",groupName: "MASSEY"}
itemGroupDetailId: {itemCode: "DUMMY05",groupName: "MASSEY"}
oemNo: "9099091"
__proto__: Object
length: 2
__proto__: Array(0)
itemName: "DUMMY05"
itemStatus: null
itemType: []
jtbCode: null
jtbLocation: null
jtbMultiplier: 0
managedBy: null
materialType: null
minInventory: null
procmethodJtb: null
procmethodRthm: null
procmethodUtt: null
rthmLocation: null
uom: null
uttLocation: null
__proto__: Object

请建议我做错了什么？谢谢。

但是当我运行此代码时，我只是同一行两次。 this a part of my html page.

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot