Заготовка углового ионного слайдера после обновления коллекции - PullRequest
Новая
       17

Заготовка углового ионного слайдера после обновления коллекции

0 голосов
/ 16 октября 2018

На моей странице есть экземпляр ion-slides, отображающий несколько изображений: 

<ion-slides class="to-top" pager>
    <ion-slide *ngFor="let image of detailImages">
        <img src="{{ image }}" alt="">
    </ion-slide>
</ion-slides>

Коллекция detailImages загружается в начале загрузки страницы и представляет собой набор строк, содержащих URL-адреса изображений, которыеукажите на моего медиа-провайдера.Вот где я загружаю detailImages (загружается при загрузке страницы): 

 loadDetailImages(ParentID: number) {
    this.detailService.getImagesCollection(ParentID).pipe(
        map(resp => {
            //Some mapping
        })
    ).subscribe(result => {
        for (let i = 0; i < result.length; i++) {
            let urlString = "http://res.cloudinary.com/someuser/image/v123456/" + result[i].CloudinaryTag + ".jpg"
            this.detailImages.push(urlString)
        }

    });
}

Пока что эта реализация работает хорошо.Однако всякий раз, когда я удаляю элемент из detailImages, весь пейджер становится пустым (белым) без прокрутки.

Вот код, который удаляет изображение из коллекции: 

deleteImage(imageURL: any) {
    this.detailService.deleteDetailImage({ imageURL: imageURL }).pipe(
        map(resp => {
            //Do some mapping working
        })
    ).subscribe(result => {
        if (result) {
            this.detailImages.splice(this.slides.getActiveIndex(),1);
            this.slides.update();
            this.toastCtrl.create({ message: "Image Removed", showCloseButton: true,duration:3000 }).present();
        }
    });
}

Я попытался обновить ползунок: 

 @ViewChild(Slides) slides: Slides;

 // and then after remove item call this
 this.slides.update();

Но это не дало эффекта.Я не уверен, что это проблема Angular или Ionic.

Я использую Angular 5.0.3 и Ionic-Angular 3.9.2

Ответы [ 3 ]

0 голосов
/ 15 ноября 2018

Я обнаружил проблему - после некоторого тестирования я заметил, что проблема возникла только тогда, когда я удалил последнее изображение на слайдах.Произошла ошибка, поскольку модуль Ionic Slider запоминает последний активный индекс после его обновления и настраивает его на доступ к индексу, который не существует.Чтобы решить эту проблему, мне нужно было добавить: 

this.slides.slideTo(0);
0 голосов
/ 31 марта 2019

Я решил это с добавлением *ngIf="detailImages.length" на ion-slides: 

<ion-slides class="to-top" pager *ngIf="detailImages.length">
    <ion-slide *ngFor="let image of detailImages">
        <img src="{{ image }}" alt="">
    </ion-slide>
</ion-slides>`
0 голосов
/ 09 ноября 2018

Для перезагрузки пользовательского интерфейса вы можете использовать Angular ChangeDetectorRef

В вашем .ts файле 

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr:ChangeDetectorRef) {}

deleteImage(imageURL: any) {
    this.detailService.deleteDetailImage({ imageURL: imageURL }).pipe(
        map(resp => {
            //Do some mapping working
        })
    ).subscribe(result => {
        if (result) {
            this.detailImages.splice(this.slides.getActiveIndex(),1);
            this.slides.update();
            this.toastCtrl.create({ message: "Image Removed", showCloseButton: true,duration:3000 }).present();
            // This will force all the components to reload
            this.cdr.detectChanges();
        }
    });
}
...