離子幻燈片循環技巧 - 不更新

我試圖在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

離子幻燈片循環技巧 - 不更新

回答

相關問題