In my application, I have a feature where users input data that needs to be validated in a form. Once the validation is successful, a button is enabled allowing the user to submit their order.
However, I'm facing an issue with this specific component where my subjects seem to not function as expected. I can successfully use .next(value) in a component and verify the arrival of the value in the service using console.log(value).
Although the service receives the value, it's not being subscribed to in the component where I intend to utilize it. I've tried troubleshooting but haven't been able to resolve the issue. Here is what I've done:
AuthService.ts
emailSubject=new Subject<string>();
getEmail(value)
{
console.log(value);
this.emailSubject.next(value); //prints email correctly in the console
}
CarService.ts
export class CarService
{
carrierSubject=new Subject<number>();
orderSubject=new Subject<Order[]>();
totalCostSubject=new Subject<number>();
lastTotalCostSubject=new Subject<number>();
getId(myIndex:number)
{
this.carrierSubject.next(myIndex);
}
setOrders(value)
{
console.log(value);
this.orderSubject.next(value);
}
setTotalCost(value)
{
this.totalCostSubject.next(value);
}
lastSetTotalCost(value)
{
this.lastTotalCostSubject.next(value);
}
CarPayment.ts
export class CarPaymentComponent implements OnInit {
car:Car;
selectedCar:string;
somePlaceholder : number = 0;
myArray:Order[];
email:string;
constructor(private carService:CarService,private authService:AuthService) { }
ngOnInit() {
this.carService.carrierSubject.subscribe(value=>
{
this.car=this.carService.getCar(value);
this.selectedCar=this.car.brand;
});
this.carService.lastTotalCostSubject.subscribe(value=>
{
this.somePlaceholder=value;
});
this.carService.orderSubject.subscribe(value=>
{
this.myArray=value;
}
);
this.authService.emailSubject.subscribe(value=>
{
this.email=value;
});
}
onSubmit()
{
console.log("ORDER INFO")
console.log('This order ordered by:'+this.email);
console.log("Ordered Car:"+this.selectedCar);
console.log("Ordered Parts:"+this.myArray);
console.log("Total Cost:"+this.somePlaceholder);
}
}