如何使用接口在 Typescript 的方法中添加数据？

Question

我正在做一个购物车测验，在单击添加按钮时，产品详细信息使用事件发射器从子级传递到父级并传递到组件，但我无法理解如何将其添加到购物车？ 由于产品和购物车界面中的属性不匹配，它在下面的 addproduct 方法中显示错误

addproduct(product: Product){this.cart.items.push(product)}

抛出错误：（参数）产品：“产品”类型的产品参数不可分配给“CartItem”类型的参数。 “产品”类型缺少“CartItem”类型的以下属性：项目、数量 (2345)

 export class AppComponent {
   products: Product[];
   cart: Cart;

constructor() {
     this.cart = {
     items: []
    } as Cart
 } 

   ngOnInit() {
this.products = [...PRODUCTS].map((product, index) => {
  product.id = index + 1;
  product.image = `/assets/images/items/${product.name.toLocaleLowerCase()}.png`;
  product.cartQuantity = 0;
  return product;
});   
    
 addToCart(product: Product) {
    this.cart.items.push(product); 
   }


**cart.ts**

export interface CartItem {
  id: number;
  item: string;
 quantity: number;
 }
export interface Cart {
  items: CartItem[];
 }

**Product.ts**

 export interface Product {
    name: string;
    price: number;
    id?: number;
    image?: string;
    cartQuantity?: number;
  }
  export enum UpdateMode {
     SUBTRACT,
    ADD
  }

app.component.html

 <app-product-list [products]="products"
                (onAddToCart)="addToCart($event)"
                (onQuantityUpdate)="updateCart($event)"
                class="flex-70"></app-product-list>
 <app-cart class="flex-30" [cart]="cart"></app-cart>

如何将产品发送到 cart.component.ts 文件中的输入属性

 export class CartComponent implements OnInit{
    @Input() cart: Cart;
       constructor() {}

Answer 1

您好，错误是因为您试图将 Product 类型的产品分配给 Cart 类型。 两者内部都有不同的密钥，并且都是强制性的。 乍一看，您可以像这样重构它，它应该可以工作。

    addToCart({id, name, cartQuantity}: Product) {
     let cart: CartItem = {
       id,
       item: name,
       quantity: cartQuantity
     };

    this.cart.items.push(cart); 
    console.log(this.cart)
   }