On the product editing page, there's a button that triggers desi calculation. Clicking on this button opens a modal with different components. The desi calculation is done in the modal by gathering necessary information from the user. When I printed this user input to the console on the product editing page, the gravity value appeared as length which puzzled me. I tried to shorten and clean up my emit structure but couldn't find the reason behind the mix-up.
I attempted to send all the data in one emit, but encountered an error because the emit only accepted single data values.
Modal Component:
@Output() dimensionalWeightCalculated: EventEmitter<number> = new EventEmitter();
@Output() width: EventEmitter<number> = new EventEmitter();
@Output() length: EventEmitter<number> = new EventEmitter();
@Output() gravity: EventEmitter<number> = new EventEmitter();
@Output() height: EventEmitter<number> = new EventEmitter();
...
calculateDesi(): void {
this.submitted = true;
if (this.desiForm.valid) {
const { length, width, height, gravity } = this.desiForm.value;
const dimensionalWeight = gravity ? parseFloat(gravity) : (length * width * height) / 3000;
this.dimensionalWeightCalculated.emit(dimensionalWeight); // Only emit a single value
this.length.emit(length);
this.length.emit(gravity);
console.log(gravity)
this.width.emit(width);
this.height.emit(height);
this.modalService.dismissAll();
}
}
Product Edit Component:
openDimensionalWeightCalculator(): void {
const modalRef = this.modalService.open(DimensionalWeightCalculatorComponent, { centered: true, size: 'lg' });
modalRef.componentInstance.dimensionalWeightCalculated.subscribe((dimensionalWeight: number) => {
console.log('Calculated dimensional weight:', dimensionalWeight);
this.productEditForm.get('ProductDetail')?.get('dimensional_weight')?.setValue(dimensionalWeight.toString());
modalRef.close();
});
modalRef.componentInstance.length.subscribe((length: number) => {
console.log('length:', length);
this.productEditForm.get('ProductDetail')?.get('length')?.setValue(length.toString());
modalRef.close();
});
modalRef.componentInstance.gravity.subscribe((gravity: number) => {
console.log('gravity:', gravity);
this.productEditForm.get('ProductDetail')?.get('weight')?.setValue(gravity.toString());
modalRef.close();
});
modalRef.componentInstance.width.subscribe((width: number) => {
console.log('width:', width);
this.productEditForm.get('ProductDetail')?.get('width')?.setValue(width.toString());
modalRef.close();
});
modalRef.componentInstance.height.subscribe((height: number) => {
console.log('height:', height);
this.productEditForm.get('ProductDetail')?.get('height')?.setValue(height.toString());
modalRef.close();
});
}
}
Current Console Output:
- Calculated dimensional weight: 4
- length: 1
- length: 4
- 4
- width: 2
- height: 3