angular - 如何计算项目总价和总价角反应表单数组
问题描述
我想计算 Item Total Price 和 Total Price 。如何获得 ItemTotal 和 SubTotal。药店发票系统。在这里,我将 Medicine 添加到行中,但如何计算我所有物品的总价格。
药品采购.component.ts
export class MedicinePurchaseComponent implements OnInit {
trial: any;
medicinePurchase: IMedicinePurchase;
medicineID = new FormControl();
brandName = new FormControl();
genericName = new FormControl();
quantity = new FormControl();
price = new FormControl();
totalPrice: number;
filteredMedicine: Observable<IMedicine[]>;
filteredMedicineByID: Observable<IMedicine[]>;
filteredMedicineByGname: Observable<IMedicine[]>;
medicine: IMedicine[] = [
];
medicines: IMedicine[];
filteredOptions: Observable<any[]>;
medicinePurchaseForm: FormGroup;
constructor(private medicineService: MedicineService, private fb: FormBuilder) {
this.filteredMedicine = this.brandName.valueChanges
.pipe(
startWith(''),
map(state => state ? this._filtermedicine(state) : this.medicine.slice())
);
this.filteredMedicineByGname = this.genericName.valueChanges
.pipe(
startWith(''),
map(state => state ? this._filtermedicineByGName(state) : this.medicine.slice())
);
this.filteredMedicineByID = this.medicineID.valueChanges
.pipe(
startWith(''),
map(state => state ? this._filtermedicineid(state) : this.medicine.slice())
);
}
ngOnInit(): void {
this.getAllMedicine();
this.initForm();
}
private initForm() {
this.medicinePurchaseForm = new FormGroup({
prescriptionId: new FormControl(),
subtotal: new FormControl(),
purchaseMedicineList: new FormArray([])
});
}
get medicineArray() {
return this.medicinePurchaseForm.controls.purchaseMedicineList as FormArray;
}
selectMedicine(value: IMedicine) {
this.medicineID.setValue(value.id);
this.genericName.setValue(value.genericName);
this.brandName.setValue(value.brandName);
this.price.setValue(value.unitPrice);
}
addMedicinetoLine(){
this.medicineArray.push(this.getLineFormGroup());
}
getLineFormGroup(){
const lineItem = this.fb.group({
medicineId: new FormControl(this.medicineID.value, Validators.required),
medicineName: new FormControl(this.brandName.value, Validators.required),
unitPrice: new FormControl(this.price.value),
quantity: new FormControl(this.quantity.value, Validators.required),
itemTotal: new FormControl(),
});
return lineItem;
}
onSubmit(){
console.log(this.medicinePurchaseForm.value);
}
getAllMedicine(){
this.medicineService.getAllMedicine().subscribe(value => {
this.medicine = value;
});
}
private _filtermedicine(value: string): IMedicine[] {
const filterValue = value.toLowerCase();
return this.medicine.filter(state => state.brandName.toLowerCase().includes(filterValue));
}
private _filtermedicineByGName(value: string): IMedicine[] {
const filterValue = value.toLowerCase();
return this.medicine.filter(state => state.genericName.toLowerCase().includes(filterValue));
}
private _filtermedicineid(value: number): IMedicine[] {
const result = this.medicine.filter(x => x.id === value);
return result;
}
}
医学puechase.component.html
<form>
<mat-form-field class="form-id" appearance="fill">
<mat-label>ID</mat-label>
<input type="number" matInput
readonly
aria-label="ID"
[matAutocomplete]="autoID"
[formControl]="medicineID">
<mat-autocomplete #autoID="matAutocomplete">
<mat-option *ngFor="let medicine of filteredMedicineByID | async" (click)="selectMedicine(medicine)">
<span>{{medicine.id}}</span> |
<span>{{medicine.brandName}}</span> |
<small>{{medicine.genericName}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="form-brand-name" appearance="fill">
<mat-label>Brand Name</mat-label>
<input type="text" matInput
aria-label="BrandName"
[matAutocomplete]="autobrandName"
[formControl]="brandName">
<mat-autocomplete #autobrandName="matAutocomplete">
<mat-option *ngFor="let medicine of filteredMedicine | async" (click)="selectMedicine(medicine)">
<span>{{medicine.id}}</span> |
<span>{{medicine.brandName}}</span> |
<small>{{medicine.genericName}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="form-generic-name" appearance="fill">
<mat-label>Generic Name</mat-label>
<input type="text" matInput
aria-label="GenericName"
[matAutocomplete]="autoGenericName"
[formControl]="genericName">
<mat-autocomplete #autoGenericName="matAutocomplete">
<mat-option *ngFor="let medicine of filteredMedicineByGname | async" (click)="selectMedicine(medicine)">
<span>{{medicine.id}}</span> |
<span>{{medicine.brandName}}</span> |
<small>{{medicine.genericName}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="form-quantity" appearance="fill">
<mat-label>Quantity</mat-label>
<input type="number" matInput [formControl]="quantity">
</mat-form-field>
<button mat-button (click)="addMedicinetoLine()">ADD</button>
</form>
<hr>
<form [formGroup]="medicinePurchaseForm" (ngSubmit)="onSubmit()" novalidate *ngIf="medicinePurchaseForm">
<div formArrayName="purchaseMedicineList">
<table>
<tr>
<th>Medicine ID</th>
<th>Medicine Name</th>
<th>Quantity</th>
</tr>
<tr *ngFor="let medicine of medicinePurchaseForm.controls['purchaseMedicineList'].controls; index as t" [formGroupName]="t">
<td><input type="text" formControlName="medicineId" placeholder="ID" /></td>
<td><input type="text" formControlName="medicineName" placeholder="Name" /></td>
<td><input type="text" placeholder="quantity" formControlName="quantity" ></td>
<td><input type="text" placeholder="Item Total" formControlName="itemTotal" ></td>
<td>Price: {{medicinePurchaseForm.controls['purchaseMedicineList'].controls[t].controls.quantity.value * medicinePurchaseForm.controls['purchaseMedicineList'].controls[t].controls.unitPrice.value}}</td>
</tr>
</table>
<!-- Calculate Total Price shows Here -->
</div>
<button type="submit">Submit</button>
</form>
我想计算 Item Total Price 和 Total Price 。如何获得 ItemTotal 和 SubTotal。药店发票系统。在这里,我将 Medicine 添加到行中,但如何计算我所有物品的总价格。
解决方案
您可以迭代控制FormArray
并计算总价。
public getTotalPrice(): number {
let totalPrice: number
for (let control of medicineArray.controls) {
totalPrice = totalPrice + itemTotal;
}
return totalPrice;
}
你也可以看看这个博客
推荐阅读
- windows - cURL 和下载 Tor 浏览 git
- android - 除奥利奥外,应用程序无法正常工作
- angular - Angular router.navigate 在 MatDialog 中不起作用
- ms-access - 访问搜索特定记录
- ms-access - MS Access 子表单未显示所有结果
- android - 如果 Json 字段属于特定类型,那么过滤掉 Json 字段的最佳方法是什么?
- vba - 使用VBA根据句子的起始字符改变文本的颜色
- c# - 手动注册 WebApi 控制器
- c# - 在 XAML 代码中绑定数据时,WPF DataGrid ItemsSource 绑定不显示数据
- python - 微调用于聚类文本文档的 hdbscan 参数