На странице редактирования товара есть кнопка расчета дези. При нажатии этой кнопки открывается другой компонент — модальный. В открытом модальном окне производится расчет дези с учетом необходимой информации. Когда я вывел эту полученную от пользователя информацию в консоль на странице редактирования товара, значение силы тяжести было записано как длина. Я исследовал, но не смог найти причину. Созданная мной структура эмиссии была немного длинной. Можете ли вы дать мне предложения по написанию более короткого и чистого кода?
Я попытался отправить данные в одном выпуске, но получил ошибку, поскольку в отправку поступило только одни данные.
модальный компонент:
@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); // Sadece tek bir değer yayınlayın
this.length.emit(length);
this.length.emit(gravity);
console.info(gravity)
this.width.emit(width);
this.height.emit(height);
this.modalService.dismissAll();
}
}
Компонент редактирования продукта:
openDimensionalWeightCalculator(): void {
const modalRef = this.modalService.open(DimensionalWeightCalculatorComponent, { centered: true, size: 'lg' });
modalRef.componentInstance.dimensionalWeightCalculated.subscribe((dimensionalWeight: number) => {
console.info('Calculated dimensional weight:', dimensionalWeight);
this.productEditForm.get('ProductDetail')?.get('dimensional_weight')?.setValue(dimensionalWeight.toString());
modalRef.close();
});
modalRef.componentInstance.length.subscribe((length: number) => {
console.info('length:', length);
this.productEditForm.get('ProductDetail')?.get('length')?.setValue(length.toString());
modalRef.close();
});
modalRef.componentInstance.gravity.subscribe((gravity: number) => {
console.info('gravity:', gravity);
this.productEditForm.get('ProductDetail')?.get('weight')?.setValue(gravity.toString());
modalRef.close();
});
modalRef.componentInstance.width.subscribe((width: number) => {
console.info('width:', width);
this.productEditForm.get('ProductDetail')?.get('width')?.setValue(width.toString());
modalRef.close();
});
modalRef.componentInstance.height.subscribe((height: number) => {
console.info('height:', height);
this.productEditForm.get('ProductDetail')?.get('height')?.setValue(height.toString());
modalRef.close();
});
}
}
текущий вывод консоли:
Мы можем использовать joinLatest из rxjs, чтобы получить все значения одновременно.
openDimensionalWeightCalculator(): void {
const modalRef = this.modalService.open(DimensionalWeightCalculatorComponent, { centered: true, size: 'lg' });
combineLatest(
modalRef.componentInstance.dimensionalWeightCalculated,
modalRef.componentInstance.length,
modalRef.componentInstance.gravity,
modalRef.componentInstance.width,
modalRef.componentInstance.height,
).subscribe(([
dimensional_weight,
length,
gravity,
width,
height
]: Array<any>) => {
const ProductDetailCtrl = this.productEditForm.get('ProductDetail');
if (ProductDetailCtrl) {
const patchValueObj = {
dimensional_weight,
length,
gravity,
width,
height
};
// remove all undefined and falsy values except zero
const result = {};
const patchValueObjFiltered = Object.keys(object).forEach(k => (object[k] || object[k] === 0) && (result[k] = object[k]));
ProductDetailCtrl.patchValue(result);
}
modalRef.close();
});
}