Question

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

[
    {
       "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

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

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

[{}] =＆gt; [{}，{}。 {}]

您必须搜索object.keys.substr(0,6)匹配的＆＃39;产品＆＃39;。 这不是一个好主意，即使它可行。

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

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

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

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

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

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

  @Input()
  public product: FormGroup;

请参阅this article了解如何构建此内容。

特别参见以＆＃34开头的部分;第一个想法显然是提取一个代表表单数组中单个项目的组件＆＃34;

以角度2分割json数组

1 个答案: