Angular中Output EventEmitter触发后product.name显示undefined的原因

核心问题：类型不匹配 + 传值错误 #

• 子组件@Input类型定义错误
  你在子组件里把products定义为单个Product对象：

  @Input() products: Product;
  

  但代码中却通过this.products[i]访问数组元素，说明这个输入应该是数组类型，正确定义应为：

  @Input() products: Product[];
  

• emit传递的参数错误
  在togglePropVisible方法中，你触发事件时传递的是整个products数组：

  this.onAddToCart.emit(this.products);
  

  但父组件的addToCart函数接收的是单个Product对象。数组本身没有name属性，所以alert(product.name)会显示undefined。正确做法是传递数组中对应的单个产品：

  this.onAddToCart.emit(this.products[i]);
  

修改后的子组件关键代码片段 #

export class ProductListComponent implements OnInit {
  @Input() products: Product[]; // 修正为数组类型
  @Output() onAddToCart: EventEmitter<Product> = new EventEmitter();
  // ... 其他代码不变

  togglePropVisible(i: number): void {
    this.isAddVisible[i] = !this.isAddVisible[i];
    this.isAddCartVisible[i] = !this.isAddCartVisible[i];
    this.products[i].cartQuantity = 1;
    this.onAddToCart.emit(this.products[i]); // 传递单个产品对象
  }
}

修改后，父组件的addToCart函数就能接收到正确的单个Product对象，product.name就能正常显示对应产品的名称了。

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