Angular 如何使用FormBuilder从API获取数据到可编辑表格？

这就是我所尝试的，并且可以很好地使用硬编码数据源。但在从api获取数据时引发类似“error-TypeError:cannotread属性'foreach'of undefined”和“error-error:Cannot find control with path:'users->0'”的错误

---

---

名称
位置

您不需要有两个独立的数据：数据源和FormArray，并使用valuesChange。您可以使用FormArray.controls作为mat表的数据源

和使用From数组一样，创建FormArray的getter

get formArray()
{
    return this.tableForm.get('users') as FormArray
}

在ngOnInit的subscribe中，创建FormGroup

ngOnInit() {
    this.empService.getEmployees().subscribe((res: any[]) => {
      this.tableForm = this.formBuilder.group({
        users: this.formBuilder.array(res.map(x => this.setUsersFormArray(x)))
      });
    });
}

请参见如何使用map在FormGroups数组中转换响应（res）——一个对象数组

html文件与您的代码相似，否则就是数据源-

<form [formGroup]="tableForm">
<mat-table formArrayName="users" [dataSource]="formArray.controls">
  <ng-container matColumnDef="EmployeeName">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let row let rowIndex = index"  
        [formGroupName]="rowIndex"> 
      <input type="text" size="2" formControlName="employee_name"> 
    </mat-cell>
  </ng-container>


  <ng-container matColumnDef="Location">
    <mat-header-cell *matHeaderCellDef>Location  </mat-header-cell>
    <mat-cell *matCellDef="let row let rowIndex = index"  
      [formGroupName]="rowIndex"> 
      <input type="text" size="7" formControlName="location">
    </mat-cell>
  </ng-container>


  <!-- Header and Row Declarations -->
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</form>

作为数据源，我们将使用

行选择

，并使用类似的

   <mat-cell *matCellDef="let row let rowIndex = index"  
      [formGroup]="formArray.at(row)">
      <input type="text" size="2" formControlName="employee_name"> 
    </mat-cell>

---

您不需要有两个独立的数据：数据源和FormArray，并使用valuesChange。您可以使用FormArray.controls作为mat表的数据源

和使用From数组一样，创建FormArray的getter

get formArray()
{
    return this.tableForm.get('users') as FormArray
}

在ngOnInit的subscribe中，创建FormGroup

ngOnInit() {
    this.empService.getEmployees().subscribe((res: any[]) => {
      this.tableForm = this.formBuilder.group({
        users: this.formBuilder.array(res.map(x => this.setUsersFormArray(x)))
      });
    });
}

请参见如何使用map在FormGroups数组中转换响应（res）——一个对象数组

html文件与您的代码相似，否则就是数据源-

<form [formGroup]="tableForm">
<mat-table formArrayName="users" [dataSource]="formArray.controls">
  <ng-container matColumnDef="EmployeeName">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let row let rowIndex = index"  
        [formGroupName]="rowIndex"> 
      <input type="text" size="2" formControlName="employee_name"> 
    </mat-cell>
  </ng-container>


  <ng-container matColumnDef="Location">
    <mat-header-cell *matHeaderCellDef>Location  </mat-header-cell>
    <mat-cell *matCellDef="let row let rowIndex = index"  
      [formGroupName]="rowIndex"> 
      <input type="text" size="7" formControlName="location">
    </mat-cell>
  </ng-container>


  <!-- Header and Row Declarations -->
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</form>

作为数据源，我们将使用

行选择

，并使用类似的

   <mat-cell *matCellDef="let row let rowIndex = index"  
      [formGroup]="formArray.at(row)">
      <input type="text" size="2" formControlName="employee_name"> 
    </mat-cell>

---

由于API调用是异步的，您需要在subscribe中移动动态表单创建。很抱歉，我没有得到您的支持。您的意思是表单生成器组应该在订阅中？移动此。setUsersForm（）；内部订阅。是的，我也尝试过。但错误仍然存在。数据源未定义。由于API调用是异步的，您需要在subscribe中移动动态表单创建。很抱歉，我没有得到您的支持。您的意思是表单生成器组应该在订阅中？移动此。setUsersForm（）；内部订阅。是的，我也尝试过。但错误仍然存在。数据源未定义。非常感谢。这是一个很好的答案。我喜欢在没有FormGroup的情况下使用FormArray的方式。但是如果我执行PUT操作，那么我需要FormGroup，对吗？我理解PUT操作是一种转换唯一元素的操作，（您可以发送到API，例如tableFormArray.at（0）.value），但您可以有一个接收数组的API，然后检查每个元素是否存在，以在您的dbs中进行更新或插入（本例中为一个职位）是的，很酷。再次感谢你的答案和要做的多个步骤。@Manmadh，我不太确定，我赶时间，但我更新了答案并发布了一个stackblitz，希望对你有所帮助。你的答案对我帮助很大。谢谢。但是我们不能使用之前的tableFormArray作为数据源而不是RowsSelect，因为在保存编辑。非常感谢。这是一个很好的答案。我喜欢在没有FormGroup的情况下使用FormArray的方式。但是如果我执行PUT操作，那么我需要FormGroup，对吗？我理解PUT操作是一种转换唯一元素的操作，（您可以发送到API，例如tableFormArray.at（0）.value）但是您可以有一个接收数组的API，然后检查每个元素是否存在，以便在您的dbs中进行更新或插入（在本例中是POST）是的，很酷。再次感谢你的答案和要做的多个步骤。@Manmadh，我不太确定，我赶时间，但我更新了答案并发布了一个stackblitz，希望对你有所帮助。你的答案对我帮助很大。谢谢。但是我们不能使用之前的tableFormArray作为数据源而不是RowsSelect，因为在保存编辑。