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”>
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 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.
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.
I am facing this exact same issue… there is NO .removeSlides method on ionSlides. In fact on github, the documentation says:
update() => Promise<void>
Update the underlying slider implementation. Call this if you’ve added or removed child slides.
Returns
Type: Promise<void>
I am likewise calling the .update method, and the slide is not removed when the underlying datasource loses an element…
Happy to do it any way that works. But at present it doesn’t.
EDIT I have found that it does work if the application is freshly loaded and logged in so I may had some corrupted background data. However, it is quite fragile, and just one error in the angular framework can make it fail.
I did find also, that even when working, if you delete a slide that is in the middle, i.e. not at an end, the slide is deleted just fine. however, if you delete the last slide, then the actual slide is still present but blank. This means that if you use the ‘ionSlideDidChange’ event, you have to handle the possibility that the slide is no longer there if the user slides past the new end to the blank empty slide.
must add id to your slider then git the slider by add viewchild @ViewChild(IonSlides) ionSlides: IonSlides;
deleteImage() {
…
…
this.ionSlides.removeSlides(slideIndex)
}
