拆分角度2中的json数组

Question

我是angular.when新手，我尝试获取文本框的值，它在一个循环中，以这种格式获取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
   }
] 

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

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

如果你想把它拆分成多个对象，那么你需要在submit方法中编写代码来迭代“大列表”并创建你想要的结构：

{} => {}，{}。{}

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

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

这是因为您需要创建一个组件来表示阵列中的单个产品：

{}，{}，{} = {product-item}，{product-item}，{product-item}

ProductList-Component有一个包含ngFor的表单，在ngFor中可以加载多个子项，如下所示：

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

请注意，此产品项目组件将需要一个@ formGroup，它是一个输入，例如：

  @Input()
  public product: FormGroup;

请参阅this article了解如何构建此应用程序。

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