IonSlide : View is not updated?

Ionic Framework
1

Hello there!

I do a bug for with the IonSlides. Only on mobile, sometimes my view is not updated, I have to tap the slider to make the content visible (otherwise I only have the spinner).

My slider is here in the view :

<ion-slides #slides
                    [options]="slidesOptions"
                    (ionSlidesDidLoad)="ionSlidesDidLoad()"
                    (ionSlideDidChange)="ionSlideDidChange()"
                    (ionSlideNextStart)="ionSlideChanged()"
                    (ionSlidePrevStart)="ionSlideChanged()">

            <ion-slide *ngFor="let date of dates; index as i; trackBy: trackByDate">

                <div *ngIf="i !== currentSlideIndex">
                    <ion-spinner color="primary"></ion-spinner>
                </div>

                <ion-grid *ngIf="i === currentSlideIndex">
                    <ion-row>
                        <ion-col size="12">
                            <h2 class="ion-text-capitalize ion-text-center text-font-primary">
                                {{ date | date:'EEEE d MMMM y' }}
                            </h2>
                        </ion-col>
                    </ion-row>
                    <ion-row class="ion-margin-top">
                        <ion-col size-xl="3" size-md="6" size="12" *ngFor="let meal of user.meals; trackBy: trackByMealKey">
                            <!-- Meal passed is just a template -->
                            <app-meal *ngIf="meal.used" [date]="date" [meal]="meal"></app-meal>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </ion-slide>
        </ion-slides>

My typescript file :


  @ViewChild('slides') slides: IonSlides;

  public dates: Array<Date> = new Array<Date>(15);
  public currentSlideIndex = 7;

  ngOnInit(): void {

      const dates =  new Array<Date>(15);
      const dateFirst = new Date();
      dateFirst.setDate(new Date().getDate() - 7);

      for (let i = 0; i < 15; i++) {
        let date = new Date();
        let dateDay = dateFirst.getDate();
        let dateMonth = date.getMonth();
        date.setDate(dateDay + i);
        date.setMonth(dateMonth);
        dates[i] = date;
      }

      this.dates = dates;
  }

I want the first slide to be the 7th, so I am able to navigate a week before and after.

When I display the index in the page, when it bugs i = 0 in the view, when it works i = 7.

I tried so many things to fix that, I do not know how to do next.

PS: Trying to use this.changeDetectorRef.markForCheck(); did not help.

Thank you for your help :slight_smile: