Angular Material报TypeError: ctx.product is undefined 编辑表单为空怎么解决

问题原因 #

你遇到的报错和数据不加载问题由两个代码错误共同导致：

1. 请求商品接口时传参错误
   你在product-update.component.ts的ngOnInit生命周期中，调用readByID接口时传递的是固定字符串'id'，而非从路由参数中拿到的实际id变量，导致请求发送到了错误的地址，拿不到对应的商品数据。
2. product变量未初始化
   你声明product时仅指定了类型没有赋初始值，接口请求是异步操作，在接口返回数据之前，模板就已经开始渲染，此时product为undefined，访问product.descricao等属性就会触发TypeError: ctx.product is undefined报错。

修复方案 #

按以下步骤修改product-update.component.ts代码即可：

1. 给product变量添加初始值，你注释掉的product: Product = {} as Product;就是正确写法，取消注释即可。
2. 修正readByID的传参，把字符串'id'替换为路由拿到的id变量。

修正后的完整product-update.component.ts代码： #

@Component({
  selector: 'app-product-update',
  templateUrl: './product-update.component.html',
  styleUrls: ['./product-update.component.css']
})
export class ProductUpdateComponent implements OnInit {

  // 取消注释添加初始值，避免异步请求前模板访问报错
  product: Product = {} as Product;

  constructor(
    private productService: ProductService,
    private router: Router,
    private route: ActivatedRoute) { }

  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');
    console.log(id);
    // 修正传参：把字符串'id'替换为实际拿到的id变量
    this.productService.readByID(id).subscribe(product => {
      this.product = product;
    });
  };
  updateProduct(): void {
    this.productService.update(this.product).subscribe(() => {
      this.productService.showMessage('Producto alterado com sucesso !');
      this.router.navigate(['/products']);
    })
  }

  cancel(): void {
    this.router.navigate(['/products']);
  }

}

额外可选优化 #

如果不想用类型断言初始化空对象，也可以在模板中用*ngIf判断product加载完成后再渲染表单，避免报错：

<mat-card *ngIf="product">
  <!-- 原有表单内容 -->
</mat-card>

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