Hello when I add the sum I get this error in the console.log, but I run the sum. Someone can help me please.
Note: you can copy well into the groin to make a good translation
error
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘3300’. Current value: ‘6600’.
.html
<ion-header>
<ion-navbar>
<ion-title>
Contact
</ion-title>
<h1>Hoy se vendio: {{sumValue}}</h1>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item-sliding *ngFor="let items of meVendi|async" >
<ion-item>
<ion-label>
<h1>Carlos pidio</h1>
<ion-list>
<h2>{{items.Adicionar.name}}:{{items.Adicionar.price}} {{calculateSum(items.Adicionar.price)}}</h2>
<h2>{{items.Platito.price}} {{calculateSum(items.Platito.price)}}</h2>
<h2>{{items.carnita.price}} {{calculateSum(items.carnita.price)}}</h2>
</ion-list>
</ion-label>
</ion-item>
</ion-item-sliding>
</ion-list>
</ion-content>
.ts
import { Component } from '@angular/core';
import { NavController, NavParams,AlertController ,Events} from 'ionic-angular';
import { AngularFireDatabase, AngularFire,FirebaseListObservable} from 'angularfire2';
import 'rxjs/add/operator/map';
@Component({
selector: 'page-contact',
templateUrl: 'contact.html'
})
export class ContactPage {
sumValue:number = 0;
averageValue = 0;
meVendi: FirebaseListObservable<any[]>;
constructor(public navCtrl: NavController,
public alertCtrl:AlertController,
public database:AngularFireDatabase,
public event:Events,
public af:AngularFire ) {
this.meVendi = <FirebaseListObservable<any>> af.database.list('/Evendido').map(items =>{
return items.map(item =>{
return item;
})
});
}
calculateSum(value) {
this.sumValue = this.sumValue + parseInt(value);
}
calculateAverage(count) {
this.averageValue = this.sumValue / count;
}
}
I’m not seeing calculate*() being called from anywhere.
is here
<ion-header>
<ion-navbar>
<ion-title>
Contact
</ion-title>
<h1>Hoy se vendio: {{sumValue}}</h1>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item-sliding *ngFor="let items of meVendi|async" >
<ion-item>
<ion-label>
<h1>Carlos pidio</h1>
<ion-list>
<h2>{{items.Adicionar.name}}:{{items.Adicionar.price}} {{calculateSum(items.Adicionar.price)}}</h2>
<h2>{{items.Platito.price}} {{calculateSum(items.Platito.price)}}</h2>
<h2>{{items.carnita.price}} {{calculateSum(items.carnita.price)}}</h2>
</ion-list>
</ion-label>
</ion-item>
</ion-item-sliding>
</ion-list>
</ion-content>
Hmm. Is the goal to have some sort of running subtotal?
Yes, and does the sum perfectly but I get that error in the console.log and I do not know why
If you’re trying to display the subtotal, this is slightly harder. I’m going to assume you don’t care about that and just want the sum and average to be complete at some point. The main point here is that the template and *ngFor loop should not be involved here. Do the work in a subscription.
Get rid of the calculate functions and the async pipe.
items: Item[] = [];
totalPrice: number;
avgPrice: number;
constructor(af: AngularFire) {
af.database.list('/Evendido').subscribe((items) => {
this.items = items;
this.totalPrice = 0;
items.forEach((item) => {
this.totalPrice += item.Adicionar.price;
this.totalPrice += item.Platito.price;
this.totalPrice += item.carnita.price;
});
this.avgPrice = this.totalPrice / items.length;
});
}
<ion-item-sliding *ngFor="let item of items">
Also, and I believe I’ve implored you about this before: please define business interfaces. I’m getting to the point where I’m considering simply ignoring any questions that include any anywhere in the code.
I get this error in the Item
Item is a business interface I made up because I refuse to perpetuate abuse of any. Call it whatever you want and put whatever in it that is supposed to be there. TypeScript interfaces.
1 Like
But the summing data is fetched from the firebase, and apologies I’m new to the subject
The data is not local
Thank you very much and apologize a little my ignorance i am new to the subject:+1:
1 Like
Yeah, i won’t comment on controls directly on Firebase, but Rapropos is right.
Need to know what am I missing. The result is NaN:
this.angFire.list('/Items').subscribe((items) => {
this.priceTotal = 0;
this.items.forEach((item) => {
this.priceTotal += this.itemPrice;
return this.priceTotal;
})
})
Don’t you mean item.itemPrice instead of this.itemPrice? Otherwise the loop makes no sense, as the item variable is never referenced. I also don’t understand what that return statement is attempting to do.
Error
Property 'itemPrice' does not exist on type 'number[]'.
FirebaseListObservable is throwing error
What does exist on your item then? price maybe? Totally depends on your data structure.
Sorry. The problem was with itemPrice was declared as string in firebase provider… I rectified that. Thanks
1 Like
