Angular报错TypeError: Cannot set properties of undefined 求助

报错原因 #

TypeError: Cannot set properties of undefined 说明你尝试修改属性的对象（product 或 productItem）是undefined，同时代码里还存在逻辑判断的语法错误。

具体修复步骤 #

1. 确保对象实例有效 #

• Cart组件：调用purchaseDisabled方法时，必须传入已初始化的Product对象。检查模板中的点击事件绑定，确保传入的是数组中存在的对象：

  <!-- 示例模板代码 -->
  <div *ngFor="let product of productList">
    <button (click)="purchaseDisabled(product)">购买</button>
  </div>
  

  同时在方法内增加对象存在性判断，避免报错：

  purchaseDisabled(product: Product){
    if(product){ // 先确认product不是undefined
      product.purchased = true;
    }
  }
  

• Card组件：如果productItem是从父组件传入的，必须通过@Input正确接收：

  import { Input } from '@angular/core';
  import { Product } from './product.model'; // 引入你的Product模型
  
  export class CardComponent {
    @Input() productItem: Product; // 声明输入属性
    buttonDisabled = false;
    // ...
  }
  

  父组件模板中要正确传递对象：

  <app-card [productItem]="product"></app-card>
  

2. 修正逻辑判断的语法错误 #

Card组件的purchasedProduct方法中，if(this.productItem.purchased=true)是赋值操作，不是判断相等，会强制把purchased设为true，同时要加可选链避免对象为undefined时报错：

purchasedProduct(){
  // 使用===判断相等，用?.避免productItem为undefined时触发报错
  if(this.productItem?.purchased === true){
    this.buttonDisabled = true;
  }
  // 更简洁的写法：直接同步状态
  // this.buttonDisabled = this.productItem?.purchased || false;
}

3. 优化按钮禁用逻辑（可选） #

可以直接在模板中绑定disabled属性，无需额外方法，更简洁：

<button [disabled]="productItem?.purchased" (click)="purchasedProduct()">购买</button>

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