Compare current value with previous value in ionic 3


#1

I need to compare object current value and previous value and change the colors as like high and low color.(High -> Green Low-> Red Normal-> Black). I’m developing the stock market application using ionic 3. I have assigned the current stock values in one object and displaying in view. My code looks like,

export class HomePage {
    oldbascrate: Object = {};
    baserates: Object = {};
    ionViewDidLoad() {
     this.liverateservice.setcallback((data)=>{
        this.oldbascrate = this.baserates;
            this.zone.run(() => {
              this.baserates  = data;
            });
     });
   }
}

And in my view

<ion-row class="light-border-btm align-items raterow" *ngIf="baserates?.length !== 0 && oldbascrate?.length !== 0 && baserates['SPOT-GOLD'] != undefined && oldbascrate['SPOT-GOLD'] != undefined && baserates['CSILVER-1'] != undefined && baserates['SPOT-INR'] != undefined">
      <ion-col col-3 class="com-name">Gold</ion-col>
        <ion-col col-3 [ngClass]="{'ratehigh' : (baserates['SPOT-GOLD']['bid'] > oldbascrate['SPOT-GOLD']['bid']), 'ratelow':(baserates['SPOT-GOLD']['bid'] < oldbascrate['SPOT-GOLD']['bid']), 'ratenormal': (baserates['SPOT-GOLD']['bid'] == oldbascrate['SPOT-GOLD']['bid'])}">{{ baserates['SPOT-GOLD']['bid'] }}</ion-col>

      </ion-row>

And in my CSS

.ratehigh{
        background: #008000;
        color: #FFFFFF;
    }
    .ratelow{
        background: #FF0000;
        color: #FFFFFF;
    }
    .ratenormal{
        background:null;
        color: #000000;
    }

But this didn’t work now, and binding baserates values to oldbascrate. When I check with above code both object are equal. How can I compare this and change the colors. Could you please anybody can assistance me.


#2

if both are equal then how can you show diff?
also, can’t able to understand why you bind the values inside ngzone. did actually you know what you did?


#3

I’m getting update of current market stock data from service and assigning that data to

this.zone.run(() => {
              this.baserates  = data;
            });

I need to check current and previous value of this.baserates in my view file and update the color. This data will be receive as json object.
If I din’t use ngzone means view not getting update. For this only I have used ngzone.


#4

check if the values are really same by console and if those are same then how can this work?


#5

No it is not same. It is getting update for every second. If I console means values are showing different that previous value. Is there any other way in ionic to swap variable.


#6

For example my console looks like this

[{com_name: "Gold Bar", buying_rate: "-", selling_rate: "3125.00"},{com_name: "Gold Ft", buying_rate: "3203.00", selling_rate: "-"}]
[{com_name: "Gold Bar", buying_rate: "-", selling_rate: "3124.00"},{com_name: "Gold Ft", buying_rate: "3204.00", selling_rate: "-"}]
[{com_name: "Gold Bar", buying_rate: "-", selling_rate: "3126.00"},{com_name: "Gold Ft", buying_rate: "3206.00", selling_rate: "-"}]

I have a code as like below,

liverates:any = [];
oldliverates:any = [];

this.liverateservice.setcallback((data)=>{
            this.zone.run(() => {
				this.oldliverates = this.liverates;
				this.liverates  = data;
			});
});

My view looks like,

 <ion-row class="light-border-btm align-items raterow" *ngFor="let liverate of liverates; let i = index">
     <ion-col col-4 class="com-name">{{liverate.com_name}}</ion-col>
     <ion-col col-4 [ngClass]="{'ratehigh' : (liverate.buying_rate > oldliverates[i].buying_rate), 'ratelow':(liverate.buying_rate < oldliverates[i].buying_rate), 'ratenormal': (liverate.buying_rate == oldliverates[i].buying_rate)}"> {{liverate.buying_rate}} </ion-col>
     <ion-col col-4 [ngClass]="{'ratehigh' : (liverate.selling_rate > oldliverates[i].selling_rate), 'ratelow':(liverate.selling_rate < oldliverates[i].selling_rate), 'ratenormal': (liverate.selling_rate == oldliverates[i].selling_rate)}">{{liverate.selling_rate}} </ion-col>
    </ion-row>

But this didn’t work to me. Could you please anybody help me to fix this issue. This is most urgent I have to give delivery to client.