CODEWITHSUNDEEP
angularionic-frameworkionic3angular5
Marnus Steyn
Marnus Steyn

Reputation: 1093

Angular Ionic slider blank after collection update

I have an instance of ion-slides on my page displaying some images:

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

The collection detailImages is loaded at the start on page load and is an collection of strings containing image URLs that point to my media provider. Here is where I load the detailImages (loaded on page load):

 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)
        }

    });
}

So far this implementation works well. However, whenever I remove an item from detailImages, the whole pager goes blank (white) with nothing to scroll through.

Here is the code that removes the image from the collection:

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();
        }
    });
}

I did try to update the slider:

 @ViewChild(Slides) slides: Slides;

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

But this had no effect. I am not sure if it is an Angular issue or Ionic Issue.

I'm using Angular 5.0.3 and Ionic-Angular 3.9.2

Upvotes: 0

Views: 1888

Answers (3)

Adrien V
Adrien V

Reputation: 633

I solved it with adding *ngIf="detailImages.length" on 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>`

Upvotes: 1

Marnus Steyn
Marnus Steyn

Reputation: 1093

I found the problem - After some testing I noted that the issue only occured when I removed the last image in the slides. The error was being generated becuase the Ionic Slider Module remembers the last active index after it is refreshed and that cuases it to try and access an index that doesn't exist. To fix this issue, all I hadd to add was:

this.slides.slideTo(0);

Upvotes: -1

saperlipopette
saperlipopette

Reputation: 1693

To reload the UI manually, you can use Angular ChangeDetectorRef

In your .ts file

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();
        }
    });
}

Upvotes: 3

Related Questions