Приложение Angular 4/Ionic 3 slides
При инициализации приложения я извлекаю файл json с сервера с DATETIME
описывающий эпохальное время, в которое я должен показывать определенное изображение. Несмотря на то, что я могу инициировать смену первого слайда, я не могу обернуться вокруг запуска последовательных слайдов.
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>