无法将数组数据修补到反应形式中的素数表

Question

按照how to implement Reactive Form with Prime NG table 上的 JS Mount 教程，我创建了自己的教程。当.ts中提供如下静态数组数据时，都可以正确预填充。

但是，当从 API 检索数据进行修补时，仅填充了第一行并记录了错误“错误错误：无法找到名称为 productId. at FormGroup._throwIfControlMissing.... 的表单控件”

我确实使用“productId”作为从 API 获取数据的参数。据我所知，它与 formArray 的控制无关。如所提供的，硬编码的静态数据也不包含“productId”。一切仍然正常。

到底是什么导致了这个问题，应该如何解决？感谢您的帮助！

1. .ts

export class EditShippingFeeComponent implements OnInit {
  productId: number;
  shippingFeeForm: FormGroup;
  selectedShippings: any = []; 
  values: any[] = [];

  // values = [
  //   { name: "walk-in", price: "0", days: "0", minValue: "n/a", description: 'Nearby pickup' },
  //   { name: "fastest", price: "7.99", days: "1", minValue: "n/a", description: 'Same day nearby delivery' },
  //   { name: "express", price: "5.99", days: "3", minValue: "n/a", description: 'Regional days shipping' }  
  // ];

  constructor(private route: ActivatedRoute, private inventoryService: InventoryService,
    private formBuilder: FormBuilder, private msgService: MessageService) { 
    this.productId = +this.route.snapshot.paramMap.get('id');
  }

  ngOnInit(): void {
    this.getShippingFeeList();
    this.shippingFeeForm = this.formBuilder.group({
      shippingDetails: this.formBuilder.array([]),
    });
    //this.populateData();
  }
getShippingFeeList() {    this.inventoryService.getShippingFeeList(this.productId).subscribe((resp: any[]) => {
      this.values = resp;
      this.populateData();  
    })
  }

get shippingDetails(): FormArray {
    return this.shippingFeeForm.get("shippingDetails") as FormArray;
  }
  
 userDetailsControls(index: number) {
    return this.shippingDetails.controls[index]["controls"];
  }
 
 private addControls() {
    return new FormGroup({
      name: new FormControl(''),
      price: new FormControl(''),
      days: new FormControl(''),
    });
  }
 
 private populateData() {         
    this.values.forEach((data, index) => {
      this.onAdd();
      this.shippingDetails.controls[index].setValue(data);
    });    
  }

1. .html

    <form [formGroup]="shippingFeeForm">
      <div formArrayName="shippingDetails">
        <p-table [value]="shippingDetails.controls" [(selection)]="selectedShippings">
          <ng-template pTemplate="header">
            <tr>
              <th style="width: 5%"></th>
              <th style="width: 15%">Name</th>
              <th style="width: 40%">Description</th>
              <th style="width: 20%">Fee ($)</th>
              <th style="width: 20%">Days</th>
              <th style="width: 20%">Min Value ($)</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-controls let-i="rowIndex">
            <tr [formGroupName]="i">
              <td><p-tableCheckbox [value]="i+1"></p-tableCheckbox></td>
              <td><input type="text" formControlName="name" class="form-control"/></td>
              <td><input type="text" formControlName="description" class="form-control"/></td>
              <td><input type="text" formControlName="price" class="form-control"/></td>
              <td><input type="text" formControlName="days" class="form-control"/></td>
              <td><input type="text" formControlName="minValue" class="form-control"/></td> 
          </ng-template>
        </p-table>
      </div>
    </form>

1. 我得到了什么：

2. 我很期待：

Answer 1

我想你需要用

替换你的 this.onAdd()

private populateData() {         
    this.values.forEach((data, index) => {
      //this.onAdd(); //<--replace this line by
      this.shippingDetails.push(this.addControls()) //<--add a new element to the formArray
      this.shippingDetails.controls[index].setValue(data);
    });    
  }