Ion-slides 不更新动态数据答案

【问题标题】：Ion-slides doesn’t update dynamic dataIon-slides 不更新动态数据
【发布时间】：2019-02-11 16:23:56
【问题描述】：

我正在使用最新版本的 ionic 4.0.0 我正在尝试在单击按钮时更新滑块的内容，但即使在 TypeScript 代码中更改了数组值，它也不会更新内容。这是我的视图代码：

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

这是我的打字稿代码：

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

}

如您所见，如果我控制台，contractPrice 已成功更改，但在“.price-contract” div 中未更改。

感谢您的帮助。

【问题讨论】：

标签： angular ionic-framework ionic3 ionic4 swiper

【解决方案1】：

我不确定您是否是这种情况，但在 Ionic 4 beta 版本中我遇到了同样的问题，因为 getActiveIndex() 从 1 返回索引而不是从 0。例如，如果第一张幻灯片处于活动状态，它将返回 1 而不是0.

因此尝试更改此代码：

priceSliderChanged() {
  this.mainSlider.getActiveIndex().then((index) => {
  index-=1; //add this code
  var activeProduct = this.products[index];
  activeProduct.profit = this.randomIntFromInterval(-5, 6);
  activeProduct.contractPrice = this.randomIntFromInterval(350, 460);
 });
}

希望这会有所帮助。

【讨论】：