Ion Slides does not update

I wanted to create a set of slides that is binded to an array of images that the user uploads. For each image, I have attached a ‘deleteImage()’ function. However, every time I tried to delete an image, although the length of the image array changes accordingly, the set of slides does not. Would like to check if its a bug or just a case of wrong implementation of the codes.

(In the component file)
deleteImage() {
this.ionSlides.getActiveIndex().then(
index => {
if (index === 0) {
this.images.shift();
this.ionSlides.update().then(() => {
console.log(“updated”);
}
);
}
else {
this.images.splice(index, 1);
this.ionSlides.update().then(() =>
console.log(‘updated’))
}
}
);
}

(In the html file)
<ion-slides pager=“true” *ngIf=“images !== undefined || images.length !== 0”>
<ion-slide *ngFor=“let image of images; let i = index”>


<ion-button shape=“round” color=“danger” size=“small” class=“close” (click)=“deleteImage()”>
×

<ion-img [src]=“image”>


Can you repost your code inside of ``` (3 backticks) so that the code is legible? Thanks.

deleteImage() {
    this.ionSlides.getActiveIndex().then(
      index => {
        if (index === 0) {
          this.images.shift();
          this.ionSlides.update().then(() => {
            console.log("updated");
          }
          );
        }
        else {
          this.images.splice(index, 1);
          this.ionSlides.update().then(() =>
            console.log('updated'))
        }
      }
    );
  }
          <ion-slides pager="true"  *ngIf="images !== undefined || images.length !== 0">
            <ion-slide *ngFor="let image of images; let i = index">
              <div class="img-wrap">
                <ion-button shape="round" color="danger" size="small" class="close" (click)="deleteImage()">
                  &times;
                </ion-button>
                <ion-img [src]="image"></ion-img>
              </div>
            </ion-slide>
          </ion-slides>

My apologies. The idea is to get the current active index of the slides. When the user clicks a button, it will trigger the function, the delete function will be called, which takes in the current index and remove it from the image array. Since the slides and the image array should be identical (in terms of length and the arrangement), this should remove the image from the array, which causes the image to remove from the slides as well.

-edit-
If it helps, the current behaviour that I’m getting is, whenever I try to delete an image that is not at the first index, the pagination does not update to the latest length of the slides and an empty slide appears at the slide which the deleted image previously reside.

Part of your problem, I think, is that you are removing images from the images array, but you are not removing slides from the list of slides. I see that the swiper api provides a function

mySwiper.removeSlide(slideIndex);

If I were you, I’d call that function instead of deleting an image from the images array.

The place I found removeSlide() is here: http://idangero.us/swiper/api/

How do you get the mySwiper instance?

I think your this.ionSlides is your swiper instance, isn’t it?

If not, post the code please on how you define and initialize that variable.

The removeSlide() method is not available in the ionSlides variable as ionSlides is an ionic component. And based on Ionic 4 documentation, ion-slides do not have a remove API.

I initialized it like this

import { Router } from "@angular/router";
import { IonSlides } from "@ionic/angular";
import { LoadingControllerService } from "../../../service/loading-controller.service";
import { AuthServiceService } from '../../../service/auth-service.service';

@Component({
  selector: 'app-report-form',
  templateUrl: './report-form.component.html',
  styleUrls: ['./report-form.component.scss'],
})
export class ReportFormComponent implements OnInit {

  @ViewChild(IonSlides) ionSlides: IonSlides;

  report: FormGroup;
  images: any[];

Correct me if I’m wrong, but I think the images array is bind to the ionSlides when it is rendered out on the template. I don’t think there is a way for us to initialize ionSlides per se.

No, I think you are doing this correctly. Your ionSlides is of type IonSlides. And, you are already calling this.ionSlides.update(), which proves that your ionSlides variable is a reference to all your slides. So, you should be able to call this.ionSlides.removeSlides(slideIndex), I think.

Can’t seem to get the method this.ionSlides.removeSlides(slideIndex) as shown.

Could there be a possibility that the ion-slides is not rendered/refreshed when there is a change in the images array? Especially with the use of @ViewChild.

I realised that the length of this.ionSlides is always lagging behind by one when i append a new image to the images array.

Any answer to this? I am trying the same and what is the alternative to .removeSlide since it doesn’t exist any more?