Angular更新产品表单获取对象值失败 报productName未定义错误

报错信息 #

编辑/更新表单时无法获取对象值，控制台抛出如下错误：

ERROR TypeError: Cannot read properties of undefined (reading 'productName')
    at UpdateProductComponent.ngOnInit (update-product.component.ts:63:33)
    at callHook (core.mjs:2576:22)
    at callHooks (core.mjs:2545:17)
    at executeInitAndCheckHooks (core.mjs:2496:9)
    at refreshView (core.mjs:11622:21)
    at refreshEmbeddedViews (core.mjs:12812:17)
    at refreshView (core.mjs:11631:9)
    at refreshComponent (core.mjs:12858:13)
    at refreshChildComponents (core.mjs:11348:9)
    at refreshView (core.mjs:11657:13)

关联代码 #

ProductService查询方法 #

getProductById(id: number){
  return this.http.get<Product>(`${this.baseUrl}/getProductById/${id}`);
}

主组件跳转逻辑 #

updateproduct = (productId: any) => {
  this.router.navigateByUrl('/updateproduct',  productId)
};

UpdateProductComponent初始化逻辑 #

product: IProduct;
id: any;

ngOnInit() {
  this.id = this.route.snapshot.paramMap.get('id');
  this.productService.getProductById(this.id).subscribe((data: Product)=>{
    this.product = data;
    console.log(this.product),              // 控制台可正常打印返回数据
    this.updateForm.patchValue({
      // productId: this.id,                // 硬编码值可正常生效
      //   productName: 'asdas',            // 硬编码值可正常生效
      productId: this.product.productId,    // 无法赋值
      productName: this.product.productName // 无法赋值
    })
  });
}

接口实际返回数据结构：

[{"productId":"2","productName":"23123","productDescription":"wqeq","productCategory":"qewqweq","units":23}]

更新反馈：将服务方法修改为Observable类型后，不再抛出初始错误，但表单值仍然无法正常填充。

问题根因 #

存在两处核心逻辑错误：

• 路由传参写法错误：navigateByUrl第二个参数仅支持传入NavigationExtra配置对象，不支持直接传参数值，当前写法没有把productId正确拼接至路由路径，paramMap.get('id')无法稳定获取正确的产品ID参数。
• 返回值类型匹配错误：GET请求定义的泛型为单个Product对象，但接口实际返回的是长度为1的Product数组，直接将数组赋值给this.product后，访问this.product.productName本质是在数组对象上查找不存在的属性，返回undefined，最终导致patchValue无法取到正确字段值。

修复方案 #

1. 修正路由跳转逻辑，确保ID参数正确传递
   首先确认路由配置已定义路径参数：

   // app-routing.module.ts 对应路由配置
   { path: 'updateproduct/:id', component: UpdateProductComponent }
   

   修正跳转方法，将productId拼接至路径：

   updateproduct = (productId: any) => {
     this.router.navigateByUrl(`/updateproduct/${productId}`);
   };
   

2. 修正接口返回值取值逻辑，匹配实际数组结构

   // 给product设置初始值，避免模板渲染阶段出现undefined报错
   product: IProduct = {} as IProduct;
   id: any;
   
   ngOnInit() {
     this.id = this.route.snapshot.paramMap.get('id');
     // 修正泛型为数组类型，匹配接口实际返回结构
     this.productService.getProductById(this.id).subscribe((data: Product[])=>{
       // 取数组第一个元素，即为目标产品对象
       this.product = data[0];
       this.updateForm.patchValue({
         productId: this.product.productId,
         productName: this.product.productName
       })
     });
   }
   

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