1

在应用程序初始化时，我从服务器中提取DATETIME文件，其中描述了我应该显示某些图像的 epoc 时间。即使我能够触发第一个幻灯片更改，我也无法将头绕在触发连续幻灯片上。

import { Http } from '@angular/http';
import { ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import { AlertController, NavController } from 'ionic-angular';
import { Slides } from 'ionic-angular';
import 'rxjs/add/operator/map';
import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
// declare var cordova:any;

@Component({
  selector: 'page-home',
   templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Slides) slides:Slides
  fetchedImages: any;
  images: any;

  imageURI: any;
  imageFileName: any;
  // storageDirectory = cordova.file.directory;

  constructor(
    public navCtrl: NavController,
    public http: Http,
    private transfer: FileTransfer,
    private alertCtrl: AlertController,
    private file: File

  ) {
       this.http.get('http://solosnet.com/signage/test.cfm')
       .map(res=> res.json())
        .subscribe(data=> {
          this.images = data;
        }
       );
    }


   goToNext(index, time) {
     var multiplied = time*1000;
     var eta_ms = multiplied - Date.now();
     console.log(eta_ms);
     setTimeout(()=> {
       this.slides.slideNext();
       console.log('Fired!');
      }, eta_ms);
    }

    startSlides() {
      if ( this.images !== undefined) {
        this.goToNext(1, this.images[1].DATETIME);
      }
    }

    slideChanged() {
      let currentIndex = this.slides.getActiveIndex();
      let nextIndex = currentIndex + 1;
      console.log('Current index is ', currentIndex);

      this.goToNext(nextIndex, this.images[nextIndex].DATETIME);
    }
}

有没有办法创建一个时间表，每次Date.now等于对象DATETIME时都会跳到下一张幻灯片JSON？

[
   {
     UUID: "uuid-johna1",
     FILE: "http://movieaddigital.com/output/ba3390-
            013f1255f293cfc4334c569d55f6682f-5_1920x1080.jpg",
     DATETIME: 1510767348
   },
   {
     UUID: "uuid-john2a",
     FILE: "http://movieaddigital.com/output/ho1199-       
            5e01d368ebc1e2fcc5be429c315afe9e_1920x1080.jpg",
     DATETIME: 1510767468
   }
]

最后我的HTML

<ion-content>
    <ion-slides *ngIf="images" class="image-slider" loop="false" 
slidesPerView="1" (ionSlideDidChange)="slideChanged()">
        <ion-slide *ngFor="let img of images ">
            <img [src]="img.FILE" class="slide-image" /> 
       </ion-slide>
    </ion-slides>
</ion-content>
4

0 回答 0