Angular CLI 12.2.0报No overload matches this call 购物车开发问题

报错核心是RxJS的Subject没有显式指定泛型类型，默认推导为unknown类型，导致订阅时Observable抛出的值类型和你声明的Product不匹配。

步骤1：给Messenger Service的Subject添加泛型约束 #

修改Messenger Service代码，给Subject和返回的Observable明确指定Product类型：

import { Observable, Subject } from 'rxjs'; // 确认导入所需依赖
export class MessengerService {    
  // 给Subject加Product泛型约束
  subject = new Subject<Product>()    
  constructor() { }    
  sendMessage(product: Product) {     
    this.subject.next(product)   
  }    
  // 显式指定返回值类型为Observable<Product>
  getMessage(): Observable<Product> {     
    return this.subject.asObservable()   
  } 
}

步骤2：修改Cart组件的订阅逻辑，替换测试数据 #

类型匹配后即可正常使用传入的product对象替换写死的测试数据，同时优化总金额计算逻辑避免重复累加：

ngOnInit() {
  this.message.getMessage().subscribe((product: Product) => {
    // 动态推入选中的商品数据
    this.cartItems.push({
      id: product.id,
      productName: product.name,
      qty: 1, // 可根据业务需求调整数量逻辑
      price: product.price
    })
    // 每次更新购物车后重新计算总金额，避免累加错误
    this.cartTotal = this.cartItems.reduce((sum, item) => sum + (item.qty * item.price), 0)
  })
}

• 请确保上述修改的两个文件中都已经正确导入了Product类型定义，避免未定义类型报错。

临时兼容方案（不推荐） #

如果暂时不想修改Service代码，可以在订阅时用类型断言跳过类型检查：

this.message.getMessage().subscribe((product: unknown) => {
  const currentProduct = product as Product
  // 后续使用currentProduct处理业务逻辑即可
})

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