bug: ionSlider calculates height wrong after updating ion-content inside

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

• Since the last update of ionic angular I ran into this issue
• Start of the App, Init Data for an ion-slider (data comes from an API via HTTP Request)
• ion-content on Slider renders correct
• use ion Refresh, which calls again data from the API
• the slider calculates the height wrong and I do not see the whole content which got rendered before
• Important: inside the slider is an div with an*ngFor and that array got updated via the Refresh

Expected behavior:

• The content should still be visible when I use the ionRefresher

Steps to reproduce:

• Create a page with a ion-slider and an ion-refresher
• add some data into the area of the slider
• add an ionRefresh method that update the data of the slider
• I figure out, that the main problem got caused because I update the Array which is used for the *ngFor, but I am not sure if there is an alternate way
• Before the update there was not that kind of issue
• I tried a lot to come to the conclusion that it has to to with the array and how I update it, or could the changes on the ion-refresher causes this?

Related code:

Short Version:

<ion-content>
    <ion-refresher class="" slot="fixed" close-duration="500ms" snapback-duration="500ms"
                   (ionRefresh)="ionRefresh($event, this.tabIndex)">
        <ion-refresher-content
                class=""
                pullingIcon="arrow-dropdown"
                pullingText="Ziehen zum Aktualisieren..."
                refreshingSpinner="circles"
                refreshingText="">
        </ion-refresher-content>
    </ion-refresher>

  <ion-slides class="test-wrapper" #SwipedTabsSlider
              (ionSlidesDidLoad) = "onSliderInit($event)"
              (ionSlideTransitionEnd)="updateTabIndex($event)"
              (ionSlideWillChange) ="sendSlidePixelNews($event);scrollToTop($event);"
              [pager]="false"
              [options]="{autoHeight: true}">

      <ion-slide>
             <div *ngFor='let t of slideArray; let i = index '>
                      <!-- Output -->
             </div>
      </ion-slide>
          <!--   .... -->
      <ion-slide>

      </ion-slide>
          <!--   .... -->
      <ion-slide>
          <!--   .... -->
      </ion-slide>
  </ion-slides>
</ion-content>

  public ionRefresh(event, type) {
    if (typeof (type) === 'string') {
      type = parseInt(type, 2);
    }
    this.loadFromAPIConnector(type, true).then(data => {
      this.slideArray = data; // When I delete this, I do not get the error
    });
    setTimeout(() => {
      event.target.complete();
    }, 2000);
  }

Other information:

• I tried via the swiper.ui to implement a function that updates the height of the slider, but it do not work as it should
• Feels like angular has a problem with manipulating the used array in *ngFor
• When I call the updateSwiperHeight in the timeOut() of doRefresh it works, but it is not a good solution because you can see in the app the not fully rendered content
• Just as additional info.

// Slider is declared at the beginning with: necessary imports are there
  @ViewChild('SwipedTabsSliderNews') public SwipedTabsSlider: IonSlides;

// function to update Swiper height - https://swiperjs.com/swiper-api
  public updateSwiperHeight() {
    console.log('UpdateSwiperHeight');
    this.SwipedTabsSlider.getSwiper().then(swiper => {
      swiper.shortSwipes = false;
      swiper.update();
      swiper.updateAutoHeight(1);
      swiper.updateSize();
    });
  }

Ionic info:

Ionic:

   Ionic CLI                     : 6.12.4 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.4
   @angular-devkit/build-angular : 0.1101.4
   @angular-devkit/schematics    : 11.1.4
   @angular/cli                  : 11.1.4
   @ionic/angular-toolkit        : 3.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 30 other plugins)

Utility:

   cordova-res (update available: 0.15.3) : 0.15.2
   native-run (update available: 1.3.0)   : 1.0.0

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v14.15.4 (/usr/local/bin/node)
   npm        : 2.15.12
   OS         : macOS Big Sur
   Xcode      : Xcode 12.4 Build version 12D4e

[NeckbreakerPascal]

Without being able to reproduce the issue on my end it is hard to say whether or not this is a bug in Ionic Framework. Where you were able to resolve the issue via #22962 (comment), maybe we can close the issue for now and revisit if it happens again?

Sure thing, totally understand it. Good idea to close and only if it re-appears i will open.

Thanks for the help so far. #22962 (comment) solved it for me.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.