离子幻灯片循环技巧 - 不更新

我试图在ionic2中拉开一个“技巧”，如下所示： - 我有一个幻灯片设置为循环。 - 当滑动滑动时，我增加或减少变量 - 该变量会导致不同的数据显示在幻灯片中。离子幻灯片循环技巧 - 不更新

这样我就可以获得幻灯片组件的完整UI体验，而无需硬编码或预加载所有其他幻灯片。例如，假设您正在查看每天的数据，我希望能够来回滑动查看前几天的数据。鉴于更改，我将重新加载相关日期数据。

它几乎可以工作，只是在循环时看起来不能正确刷新滑块。看看这个 http://plnkr.co/edit/VlxrNO7I6sqLGHsLdB9R?p=preview

<ion-slides loop="true" (ionSlidePrevEnd)="slideChanged(-1)" (ionSlideNextEnd)="slideChanged(1)"> 
    <ion-slide>Slide{{newval}} 
    Test 
    </ion-slide> 
</ion-slides> 
</ion-content>

控制器

export class HomePage { 

    appName = 'Ionic App'; 
    newval: number = 0; 
    constructor(public navController: NavController) { } 

    slideChanged(step: number) { 
     this.newval = this.newval + step; 
    } 
}

如果你刷来回文本并没有改变。它应该增加或减少，例如幻灯片1，幻灯片2等... 但做了几次滑动，然后，而不是刷卡只需单击幻灯片并稍稍移动它，然后标签刷新，以给你正确的价值！它几乎就像因为我循环 - 所有显示的是原始幻灯片值，而不是更新的值，直到我点击幻灯片上的某个地方导致它刷新。

那么底线我认为这是一个错误？有没有什么办法可以通过编程触发这个“刷新”行为？

感谢

来源

2017-02-09 Gotts

我会建议看看使用'NgZone'。当我对要显示的内容进行更改时，我正在使用它进行任何刷新。但是，我正在使用JS中较早版本的Ionic 2，所以我不确定TS的语法。所以无法给你一个完整的源代码 – Huiting

但是，我会认为你已经有一些你想要显示的数据。通常ngFor循环通过数据工作罚款我没有做任何刷新 – Huiting

是的，我在集合上使用ngFor。它只有当我点击幻灯片并稍微移动它时才有效......只有当它刷新才能显示正确的数据 – Gotts

-1

嗨改变你的代码home.page.html到：

<ion-slides loop="true" (ionSlidePrevEnd)="slideChanged(-1)" (ionSlideNextEnd)="slideChanged(1)"> 
    <ion-slide *ngFor="let item of items">Slide {{newval}} 
     <ion-list> 
     {{item}} 
     </ion-list> 
    </ion-slide> 
</ion-slides>

我在plunker测试它，当你滑动的内容将发生变化。做ngFor为每个ion-slide而不是在ion-slide

来源

2017-02-14 01:24:55 Huiting

当然，这将工作，因为它为每个项目生成一个新的离子幻灯片，所以它的预加载和它的工作方式离子幻灯片通常工作如果你实际上已经预先定义了所有的幻灯片。我的整个观点是，我试图摆脱1张幻灯片，以获得UI体验，并在幻灯片放映时刷新幻灯片中的数据。而这不令人耳目一新！ – Gotts

离子幻灯片循环技巧 - 不更新

回答

相关问题