Question

Api结构就像

  {
     "id": "string",
     "referenceNumber": "string"
     "goodsReceiptProducts": [
       {
        "id": "1",
        "productName": "xxx",
        "quantity": 10,
        "cost": 0,
        "note": "xxx"
       },
       {
        "id": "2",
        "productName": "yyy",
        "quantity": 10,
        "cost": 0,
        "note": "yyy"
       }
     ]
     }

我必须在表中显示数组“ goodsReceiptProducts”。

我在下面的编码中使用

组件.ts

步骤1：-fb.group

     this.goodsReceiptFormGroup = this.fb.group({
         referenceNumber: ['', [Validators.required]],
         goodsReceiptProducts: this.fb.array([
            this.initGRProducts()
        ])
      });

步骤2：-fb.array（goodsReceiptProducts）

   private  initGRProducts() {
      return this.fb.group({
          productName: ['',[Validators.required]],
          quantity: ['',[Validators.required]],
          note: [''],
          unitPrice:['']
     })
   }

第3步：获取价值

 getById{        
  this.GRService.getById(id)
  .subscribe(
    goodsReceipt => {
      this.GRFormGroup.patchValue({
        referenceNumber: goodsReceipt.referenceNumber,
        goodsReceiptProducts: goodsReceipt.goodsReceiptProducts
      });
     }
    );
  }

Component.Html

我使用了以下模板

   <table formArrayName="goodsReceiptProducts" class="table table-striped table-bordered ">
        <thead class="card-body">
          <tr>
            <th>ProductName</th>
            <th>Quantity</th>
            <th>Note</th>
            <th>Cost</th>
            <th></th>
          </tr>
        </thead>
        <tbody">
           <tr *ngFor="let item of GRFormGroup.get('goodsReceiptProducts')['controls']; let i=index; "
            [formGroupName]="i">
             <td><input type="text" class="form-control" formControlName="productId"/></td> 
            <td><input type="text" class="form-control" formControlName="quantity" /></td>
            <td><input type="text" class="form-control" formControlName="note" /></td>
            <td><input type="text" class="form-control" formControlName="unitPrice" /></td>
            <td class="text-center">
              <button type="button"(click)="addItem()"> </button>
              <button type="button"(click)="deleteItem(i)"> </button>
            </td>
          </tr>
        </tbody>
      </table>

Api包含“ goodsReceiptProducts”数组中的2个产品。

* ngFor =“ GRFormGroup.get（'goodsReceiptProducts'）['controls']的项目；让i = index;” [formGroupName] =“ i” --->此* ng对于仅加载一个圆的条件。

我检查GRFormGroup.get（'goodsReceiptProducts'）。length。长度是1。

基于数组“ goodsReceiptProducts”中包含的产品，要加载的循环。这里有2种产品，想要完成两次循环。

我只需要使用formControlName表。

让我知道，为什么一次加载它，任何人都可以给出解决方案？

角表中的NgFor *

0 个答案: