Ion-slides doesn't update dynamic data


#1

I am using latest version of ionic 4.0.0
I am trying to update content of slider on button click but it doesn’t update the content even array values changed in TypeScript code.
Here us my view code:

<ion-slides class="main-slide" pager=true  loop="true"  #mainSlider [options]="mainSliderOpts">
  <ion-slide class="change-display" *ngFor="let product of products;">        
    <div class="item-container">
      <div class="strike-title">Strike Price</div>
      <div class="devider"></div>

      <p class="description">
        To at least what price do you think the stock will move from its current price if
        <strong>${{product.price}}</strong>?
      </p>
      <div class="lose" [ngClass]="{ 'profit': product.profit > 0,'lose':   product.profit < 0 }">
        <span *ngIf="product.profit > 0">+</span>{{product.profit}}%
      </div>


      <div class="price-contract">
        PRICE PER CONTRACT: <strong>${{product.contractPrice}}</strong>
      </div>

      <ion-button class="next-btn" (click)=priceSliderChanged() expand="full" color="dark">Change Values</ion-button>

    </div>
  </ion-slide>
</ion-slides>

And Here is my typescript code:

import { Component, ViewChild } from ‘@angular/core’;
import { IonSlides } from ‘@ionic/angular’;

@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
})
export class HomePage {
@ViewChild(‘priceSlider’) priceSlider: IonSlides;
@ViewChild(‘mainSlider’) mainSlider: IonSlides;

products: any = ;
priceSliderOpts = {
slidesPerView: 2
};

mainSliderOpts = {
effect: ‘flip’,
slidesPerView: 1,
lockSwipeToNext: true,
loop: true,
onInit: (slides: any) => {
alert(“Init!!”);
}

};
ionViewDidEnter() {
//lock manual swipe for main slider
this.mainSlider.lockSwipeToNext(true);
this.mainSlider.lockSwipeToPrev(true);
}

prices: number = [
297.50,
295.00,
292.75,
290.75
];

next() {

this.mainSlider.lockSwipeToNext(false);
this.mainSlider.slideNext();
this.mainSlider.lockSwipeToNext(true);

}

randomIntFromInterval(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}

constructor() {
this.products = [
{
title: ‘NFLX’,
price: 313.2,
prices: [
297.50,
295.00,
292.75,
290.75
],
profit: 4,
contractPrice: 400 //defalt price
},
{
title: ‘NFLX 1’,
price: 413.2,
prices: [
297.50,
295.00,
292.75,
290.75
],
profit: -6.6,
contractPrice: 500 //defalt price
},
{
title: ‘NFLX 2’,
price: 213.2,
prices: [
297.50,
295.00,
292.75,
290.75
],
profit: -7,
contractPrice: 300 //defalt price
}
]
}
priceSliderChanged() {

this.mainSlider.getActiveIndex().then((index) => {
  var activeProduct = this.products[index];
  activeProduct.profit = this.randomIntFromInterval(-5, 6);
  activeProduct.contractPrice = this.randomIntFromInterval(350, 460);
  //setTimeout(()=>{
  this.mainSlider.update().then((d: any) => {
   // alert(d);
  });
});

}
}

As you can see contractPrice was changed successfully if I console but not changed in ‘.price-contract’ div.

Thanks for your help.


#2

hello,
hard to read.
I assume you wanna change it in priceSilderChanged.
You create and change a local variable called activeProduct. The local variable activeProduct is not used and can not used inside html.
I guess you need something like

this.products[index].contractPrice = this.randomIntFromInterval(350, 460);

Best regards, anna-liebt


#3

@anna_liebt thanks for your response.
Problem is slides will not update even products price is changed.


#4

Hello,
have you changed your code? If yes, then post it.

Best regards, anna-liebt