Expression has changed after it was checked


#1

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;
}
 




}


#2

I’m not seeing calculate*() being called from anywhere.


#3

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>
 


#4

Hmm. Is the goal to have some sort of running subtotal?


#5

Yes, and does the sum perfectly but I get that error in the console.log and I do not know why


#6

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.


Renew Page which has form and fetches items from other page
#7

I get this error in the Item[]


#8

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.


#9

But the summing data is fetched from the firebase, and apologies I’m new to the subject

The data is not local


#10

Thank you very much and apologize a little my ignorance i am new to the subject:+1:


#11

Yeah, i won’t comment on controls directly on Firebase, but Rapropos is right.


#12

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;
      })
    })

#13

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.


#14

Error

Property 'itemPrice' does not exist on type 'number[]'.

FirebaseListObservable is throwing error


#15

What does exist on your item then? price maybe? Totally depends on your data structure.


#16

Sorry. The problem was with itemPrice was declared as string in firebase provider… I rectified that. Thanks