Angular FormArray结合Category模型报错：TypeError读取undefined的'0'属性

错误根源 #

你的Category类中，products属性仅用非空断言!声明了类型，但实例化Category时并未初始化该数组，导致formData.products实际为undefined。当你调用formData.products.push()、formData.products.splice()或访问formData.products[i]时，自然会抛出Cannot read properties of undefined的错误。而之前的本地模拟对象中，products直接初始化为空数组，因此不存在该问题。

解决方案 #

1. 初始化Category类的products数组 #

修改Category类，确保products在实例化时是一个空数组：

import { Product } from "./product"

export class Category {
    idcategory!: number
    nom!: string
    // 直接初始化空数组
    products: Product[] = []

    // 也可通过构造函数初始化（适合复杂场景）
    // constructor() {
    //     this.products = [];
    // }
}

2. 调整组件逻辑，保持表单与模型同步 #

（1）修正addMember方法

让表单的FormArray与formData.products完全同步，避免手动计数导致的不一致：

addMember(){
    // 同步添加空Product对象到模型
    this.formData.products.push({ nom:'', prix:0 });
    // 添加表单控件
    this.members.push(this.memberAdded());
    // 用表单数组长度维护count，避免手动计数出错
    this.count = this.members.length;
}

（2）修正removeMember方法

删除表单控件时同步删除模型中的对应产品：

removeMember(){
    if(this.members.length === 0) return; // 防止删除空数组
    this.isSubmitted = false;
    // 删除最后一个表单控件
    this.members.removeAt(this.members.length-1);
    // 同步删除模型中的对应产品
    this.formData.products.splice(this.members.length);
    this.count = this.members.length;
}

（3）简化onSubmit方法

无需手动循环赋值，直接将表单值映射到模型，减少出错概率：

onSubmit(form:FormGroup){
    this.isSubmitted = true;
    // 将表单值合并到formData，自动覆盖对应属性
    Object.assign(this.formData, form.value);

    this.categoryService.addcategory(this.formData).subscribe(
        prod => {console.log(prod);}
    ); 
}

3. 可选：初始化默认产品表单 #

如果需要页面加载时就显示一个空产品输入框，在ngOnInit中调用初始化方法：

ngOnInit(): void {
    // 初始化一个空产品表单
    this.addMember();
}

通过以上修改，formData.products始终为有效数组，即可解决你遇到的TypeError问题。

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