以角度2分割json数组

Question

我是angular的新手。当我尝试获取textbox的值时，循环获取这种格式的json数组 - 在formsubmit方法中，如果我执行console.log（myForm.value），那么我得到这个大的列表：

[
    {
       "product-0":"Voltas",
       "avi-0":"5",
       "def-0":"0",
       "quantity-0":3,
       "product-1":"Voltas1",
       "avi-1":"5",
       "def-1":"1",
       "quantity-1":3,
       "product-2":"Voltas2",
       "avi-2":"5",
       "def-2":"7",
       "quantity-2":1,
       "product-3":"Voltas0",
       "avi-3":"5",
       "def-3":"6",
       "quantity-3":1
   } 
]

任何人都可以帮助我以这种格式获得json

[
   {
      "product-0":"Voltas",
      "avi-0":"5",
      "def-0":"0",
      "quantity-0":3
   },
   {
      "product-1":"Voltas",
      "avi-0":"5",
      "def-0":"0",
      "quantity-0":3
   }
] 

在角度2.提前提前。这是我的HTML代码

<form #myForm="ngForm">  
  <ion-item *ngFor="let productlist of productlists;let i = index">
    <ion-row>
      <ion-col width-15><input type="hidden" id="hiddenValue" [(ngModel)]="productlist.product" name="product-{{i}}" /> {{productlist.product}}</ion-col>
      <ion-col width-25><input type="hidden" id="hiddenValue" [(ngModel)]="productlist.avi" name="avi-{{i}}"/>{{productlist.avi}}</ion-col>
      <ion-col width-25><input type="hidden" id="hiddenValue" [(ngModel)]="productlist.def" name="def-{{i}}"/>{{productlist.def}}</ion-col>
      <ion-col width-25 class="add">
      <button clear (click)="increment(productlist)"><ion-icon name="add-circle" ></ion-icon></button>            
          <ion-item><ion-input type="number" [(ngModel)]="productlist.quantity"  name="quantity-{{i}}" class="quantity"></ion-input></ion-item>                
      <button clear (click)="decrement(productlist)"><ion-icon name="remove-circle" ></ion-icon></button>
    </ion-col>          
    </ion-row>
  </ion-item>
  <button ion-button (click)="formSubmit(myForm.value)">submit</button>
  </form>

Answer 1

在模板中，您只有一个表单，而单个表单只能返回一个对象。

如果要将其拆分为多个对象，则需要在提交方法中编写代码以迭代“大列表”并创建所需的结构：

[ {} ] => [ {}, {}. {} ]

你必须搜索匹配'产品'的object.keys.substr(0,6)。即使它可以工作，这也不是一个好主意。

我建议的是你创建嵌套表单 - 列表中每个项目的一个表单。我建议你使用反应形式，因为它更容易。

这是因为您需要创建一个代表数组中单个产品的组件：

[{}，{}，{}] = [{product-item}，{product-item}，{product-item}]

ie：ProductList-Component有一个带有ngFor的表单，在ng中你加载多个子节点，如下所示：

  <product-item *ngFor="let product of productlists"
    [product]="product">
  </product-item>

请注意，此product-item组件需要@Input，这是一个formGroup，例如：

  @Input()
  public product: FormGroup;

请参阅this article以了解如何构建此功能。

特别是请参阅以“第一个想法显然是提取表示表单数组中的单个项目的组件”开头的部分