如何通过Form Builder从API获取数据到Angular Mat可编辑表格？解决报错

我来帮你分析这两个常见的异步数据处理坑，一步步解决问题：

错误原因分析 #

1. ERROR TypeError: Cannot read property 'foreach' of undefined #

• 拼写错误：JavaScript/TypeScript数组的遍历方法是forEach（大写E），你写成了小写的foreach。
• 异步时序问题：API请求是异步操作，你在ngOnInit里刚发起请求就立刻调用setUsersForm，此时this.dataSource还没被API返回的数据赋值，还是undefined，调用遍历方法自然报错。

2. ERROR Error: Cannot find control with path: 'users -> 0' #

FormArrayusers初始是空的，但表格在API数据加载后渲染了行，每个行用[formGroupName]="rowIndex"绑定FormArray的对应索引，此时FormArray里没有对应的FormGroup，Angular找不到控件路径就会抛出这个错误。

修正后的代码实现 #

TypeScript代码 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { MatTableDataSource } from '@angular/material/table';
import { EmpService } from './emp.service'; // 确保你的服务路径正确

@Component({
  selector: 'app-editable-table',
  templateUrl: './editable-table.component.html',
  styleUrls: ['./editable-table.component.css']
})
export class EditableTableComponent implements OnInit {
  dataSource!: MatTableDataSource<any>;
  tableForm!: FormGroup;
  displayedColumns: string[] = ['EmployeeName', 'Location']; // 定义表格列

  constructor(
    private formBuilder: FormBuilder,
    private empService: EmpService
  ) { }

  ngOnInit() { 
    // 先初始化表单结构，确保表单在数据加载前就存在
    this.tableForm = this.formBuilder.group({ 
      users: this.formBuilder.array([]), 
    }); 

    // 监听表单值变化
    this.tableForm.get("users")?.valueChanges.subscribe((users) => { 
      console.log("users", users); 
    }); 

    // 发起API请求，在回调里处理数据和表单初始化
    this.empService.getEmployees().subscribe((res: any[]) => { 
      this.dataSource = new MatTableDataSource(res); 
      console.log(this.dataSource); 
      // 数据加载完成后再构建表单数组
      this.setUsersForm(); 
    }); 
  } 

  private setUsersForm() { 
    const userCtrl = this.tableForm.get("users") as FormArray; 
    // 清空现有控件，避免重复添加（比如API请求重新触发时）
    userCtrl.clear();
    console.log(this.dataSource); 
    // 修正：遍历MatTableDataSource的data属性，使用正确的forEach拼写
    this.dataSource.data.forEach((user) => { 
      console.log(user); 
      userCtrl.push(this.setUsersFormArray(user)); 
    }); 
  } 

  private setUsersFormArray(user: any) { 
    return this.formBuilder.group({ 
      employee_name: [user.employee_name], 
      location: [user.location], 
    }); 
  } 
}

HTML模板代码 #

<form [formGroup]="tableForm">
  <mat-table formArrayName="users" [dataSource]="dataSource">
    <!-- 姓名列 -->
    <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="15" 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="15" formControlName="location" />
      </mat-cell>
    </ng-container>

    <!-- 表头和行渲染 -->
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</form>

关键修改点说明 #

1. 调整异步代码顺序：先初始化表单结构，再发起API请求，确保表单在数据加载前就已存在。
2. 修正表单初始化时机：把setUsersForm移到API请求的subscribe回调内部，只有当数据返回、dataSource被赋值后才构建表单数组。
3. 修正遍历对象：从this.dataSource改成this.dataSource.data，因为MatTableDataSource是包装类，真正的数据源存在data属性中。
4. 修复拼写错误：把foreach改为正确的forEach。
5. 添加控件清空逻辑：调用userCtrl.clear()避免重复添加FormGroup，防止表单控件重复。

内容的提问来源于stack exchange，提问作者Manmadh