I am currently working on developing a shopping cart quiz. I have successfully passed the product details from child to parent using event emitter, but I am encountering an issue when trying to add the product to the cart. The error I am facing is in the `addProduct` method below due to mismatched properties between the `Product` and `CartItem` interfaces.
addProduct(product: Product){this.cart.items.push(product)}
The error message states: (parameter) product: Product Argument of type 'Product' is not assignable to parameter of type 'CartItem'. Type 'Product' is missing the following properties from type 'CartItem': item, quantityts(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>
How can I correctly send the product to the input property in the cart.component.ts file?
export class CartComponent implements OnInit{
@Input() cart: Cart;
constructor() {}