Currently, I am attempting to utilize a messenger service to send products to the cart component. Within the 'Product' class, there are various product attributes stored. Although I managed to successfully log the product to the console in the cart component, encountering an issue when establishing the subscribe method. Specifically, the 'product: Product' line within the subscribe method of the cart component triggers the appearance of the following error message:
src/app/cart/cart.component.ts:31:7 - error TS2769: No overload matches this call.
Overload 1 of 5, '(observer?: NextObserver<unknown> | ErrorObserver<unknown> | CompletionObserver<unknown> | undefined): Subscription', gave the following error...
Below is my messenger service file for reference:
import { Injectable } from '@angular/core';
import {Subject, Observable} from 'rxjs';
import { Product } from './product';
@Injectable({
providedIn: 'root'
})
export class MessengerService {
subject = new Subject();
constructor() {}
sendMsg(product: any) {
console.log(product);
this.subject.next(product);
}
getMsg() {
return this.subject.asObservable();
}
}
Here is the content of the cart component file:
import { Component, OnInit } from '@angular/core';
import { MessengerService } from 'src/app/messenger.service';
import { Product } from 'src/app/product';
import { CartItem } from 'src/app/cartitem';
import { Observable } from 'rxjs';
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
cartItems: any[] = [];
cartTotal = 0;
constructor(private msg: MessengerService) {}
ngOnInit() {
this.msg.getMsg().subscribe((product: Product) => {
this.addProductToCart(product);
});
}
addProductToCart(product: Product) {
console.log(product);
this.cartItems.push({
productId: product.id,
productName: product.name,
qty: 1,
price: product.price
});
this.cartTotal = 0;
this.cartItems.forEach(item => {
this.cartTotal += (item.qty * item.price);
});
}
}