ionic2滑塊無法使用* ngFor - angular2

屏幕上的問題!!ionic2滑塊無法使用* ngFor - angular2

當我們點擊了跳過按鈕 - 登錄頁面打開！

的登錄頁！

現在，再次點擊首頁圖標滑塊頁面將打開！

問題：

- 滑塊停止工作！試圖滑動時，只有一個圖像顯示，它不起作用。

這裏是代碼：

slides = [ 
 
     { 
 
      title: "Welcome to the Platform!", 
 
      description: "The <b>Ionic Component Documentation</b> showcases a number of useful components that are included out of the box with Ionic.", 
 
      image: "img/ica-slidebox-img-1.png", 
 
     }, 
 
     { 
 
      title: "What is platform?", 
 
      description: "<b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.", 
 
      image: "img/ica-slidebox-img-2.png", 
 
     }, 
 
     { 
 
      title: "What isPlatform?", 
 
      description: "The <b>Ionic Platform</b> is a cloud platform for managing and scaling Ionic apps with integrated services like push notifications, native builds, user auth, and live updating.", 
 
      image: "img/ica-slidebox-img-3.png", 
 
     } 
 
    ];

<ion-content class="home-slider-page"> 
 
\t <ion-slides pager> 
 
\t \t <ion-slide *ngFor="let slide of slides"> 
 
\t \t \t <ion-toolbar> 
 
\t \t \t \t <ion-buttons end> 
 
\t \t \t \t \t <button block (click)="goToCategoryPage()"> 
 
\t \t \t \t \t \t Skip 
 
\t \t \t \t \t </button> 
 
\t \t \t \t </ion-buttons> 
 
\t \t \t </ion-toolbar> 
 
\t \t \t <img [src]="slide.image" class="slide-image"/> 
 
\t \t \t <h2 class="slide-title" [innerHTML]="slide.title"></h2> 
 
\t \t \t <p [innerHTML]="slide.description"></p> 
 
\t \t </ion-slide> 
 
\t \t <ion-slide> 
 
\t \t \t <ion-toolbar> 
 
\t \t \t </ion-toolbar> 
 
\t \t \t <img src="img/ica-slidebox-img-4.png" class="slide-image"/> 
 
\t \t \t <h2 class="slide-title">More Products?</h2> 
 
\t \t \t <button large clear (click)="goToCategoryPage()"> 
 
\t \t \t \t Continue 
 
\t \t \t \t <ion-icon name="arrow-forward"></ion-icon> 
 
\t \t \t </button> 
 
\t \t </ion-slide> 
 
\t </ion-slides> 
 
</ion-content>

來源

2016-07-24 Ankit Maheshwari

創建問題的演示，否則有太多不清楚。 – dfsq

感謝您的關注！這裏是演示的鏈接 - https://i.diawi.com/vVs2tn –

我有同樣的問題，你解決了嗎？ – vuhung3990

-1

我不知道如果我理解正確的，但我不認爲這是ngFor的問題因爲第一次運作良好。只有當你第二次打開頁面時，它纔會工作。

同樣在你上一個截圖的滑塊似乎只有一個頁面..我認爲這是你的頁面的問題，也許你從幻燈片變量中刪除，或者你做了一個錯誤的初始化（在頁面上的事件你清理幻燈片變量）。

來源

2016-07-24 13:25:36 marius

我沒有清理幻燈片變量。假設如果我這樣做，那麼不應該顯示第一個圖像！不是嗎？？ –

請在ionViewLoaded事件中添加幻燈片中的另一張幻燈片，以查看當您是否登錄時您有2張幻燈片 – marius

這不起作用..！ –

添加延遲可以修復此錯誤。

在您的打字稿文件

export class SliderPage { 
    loaded = false; 
    constructor() { 

    } 
    ionViewLoaded() { 
    setTimeout(() => { 
     this.loaded = true; 
    }, 400); 
    } 
}

查看

<ion-slides *ngIf="loaded&&slides.length>0" pager> 
    <ion-slide *ngFor="let slide of slides"> 
    <ion-toolbar> 
     <ion-buttons end> 
     <button block (click)="goToCategoryPage()"> 
      Skip 
     </button> 
     </ion-buttons> 
    </ion-toolbar> 
    <img [src]="slide.image" class="slide-image" /> 
    <h2 class="slide-title" [innerHTML]="slide.title"></h2> 
    <p [innerHTML]="slide.description"></p> 
    </ion-slide> 
    <ion-slide> 
    <ion-toolbar> 
    </ion-toolbar> 
    <img src="img/ica-slidebox-img-4.png" class="slide-image" /> 
    <h2 class="slide-title">More Products?</h2> 
    <button large clear (click)="goToCategoryPage()"> 
     Continue 
     <ion-icon name="arrow-forward"></ion-icon> 
    </button> 
    </ion-slide> 
</ion-slides>

來源

2016-08-22 15:06:13 ddllr

ionic2滑塊無法使用* ngFor - angular2

回答

相關問題