Dear,
There is never ending list of item description with item price. I want to update the total every time the new item price is added. Following is my html:
<div text-center><button ion-button small full color="secondary" center (click)="addItems()">Add Purchase Items</button></div>
<ion-label center>Items Added</ion-label>
<ion-item>Total Bill Value: Rs. {{getTotal()}}</ion-item>
<ion-item *ngFor="let item of itemList | async" (click)="showOptions(item.$key, item.name, item.quantity, item.units, item.price)" #slidingItem>
<ion-col>{{item.name}}</ion-col>
<ion-col>{{item.quantity}} </ion-col>
<ion-col>{{item.units}} </ion-col>
<ion-col>Rs. {{item.price}}</ion-col>
</ion-item>
Following is the ts:
getTotal() {
this.itemPrice += this.itemPrice;
return this.itemPrice;
}
I am getting result as NaN… i tried the ‘for’ method but there is error as it does not recognize length as property… Kindly help
No function called from a template (such as getTotal()
is here) may ever modify state, because you have no idea how many times it will be called, or under what circumstances. You should declare a totalPrice
property and update it appropriately (perhaps in addItems()
), but it emphatically may not be modified in any function interpolated by the template (you shouldn’t even need to have a interpolated by the template, a property binding should be sufficient and more performant).
Thanks rapropos,
I am not clear on how adding totalPrice in addItems() can help. Following is my addItems():
addItems(){
let prompt = this.alertCtrl.create({
title: 'Purchase Items',
message: 'Enter Item details for purchase',
inputs: [
{
name: 'name',
placeholder: 'Item Name'
},
{
name: 'quantity',
placeholder: 'Quantity',
type: 'number'
},
{
name: 'units',
placeholder: 'Grams, KG, Inches etc',
},
{
name: 'price',
placeholder: 'Price Name',
type: 'number'
}
],
buttons: [
{
text: 'Cancel',
handler: data => {
console.log('Cancel clicked')
}
},
{
text: 'Save',
handler: data =>{
this.itemList.push({
name: data.name,
quantity: data.quantity,
units: data.units,
price: data.price
})
}
}
]
});
prompt.present();
}
The bit that pushes something onto itemList
could add data.quantity * data.price
to totalPrice
.
You mean total: data.quantity * data.price and add totalPrice…Although i can look at it. My question is how to add multiple price input by user… For example, the user inputs $100 for one item and $25 for second, the total should be $125… I am not looking for multiplying quantity and price right now
Please provide access to a complete repository on GitHub that people can use to reproduce your situation and suggest improvements.
I have pushed to firebase… Any way I can use it from there to add the item price?