Ion-slides isuless auto высота ионная 4

Question

Я работаю со слайдами и карточками внутри слайдов, которые загружаю данными без проблем. У меня проблема с событиями ion-infinite-scroll, потому что, когда я перезагружаю больше данных на карту, они загружаются правильно, но когда я меняю слайд, активный слайд остается с высотой предыдущего слайда. Я искал информацию об этом, и есть атрибут «autoHeight», который установлен в true в настройках слайдера. Когда я делаю это и перезагружаю данные с 0, слайд показывает мне небольшую область с данными карты, но они почти не отображаются. Изображения прилагаю с проблемой:

https://aws1.discourse -cdn.com / ionicframework / optimized / 3X / 1 / c / 1c72f31fd173fc5d4ccd62630527878bf777beba_2_230x500.jpeg

1007 **1006* 10071009 * -cdn.com / ионная структура / оригинал / 3X / 1 / a / 1ab2124b55289cd1283b24d191e112ac9bf67e1e.jpeg

https://aws1.discourse -cdn.com / ионная структура / оригинал / 3X / 4 / f4f81e86d94c9a1b8c318c243958e1ed4d20f1560.jpeg

Я знаю, что код является чем-то длинным, и пытаюсь обобщить его столько, сколько смогу, я прошу соответствующие извинения за случай. Как вложение, я видел на форумах об этой проблеме, и я видел функцию ionSliders под названием «updateAutoHeight», но до сих пор я не мог заставить ее работать:

@ ViewChild (IonSlides) slides: IonSlides;this.slides.updateAutoHeight (400);

Всю помощь, которую вы мне могли бы оказать, даже если бы они были с идеями, я был бы очень признателен, поскольку пришло время, когда я не знаю, что еще делатьоб этом, чтобы высота моих карт работала хорошо, когда я инициализирую приложение или добавляю дополнительные данные

  <ion-toolbar class="ionToolbarPrincipal">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Noticias Generales</ion-title>
  </ion-toolbar>

  <ion-toolbar class="ionToolbarSegment">
    <ion-segment scrollable [(ngModel)]="categories" (ionChange)="CambiarCategoria($event)">
      <ion-segment-button *ngFor="let category of listaCategorias" value="{{ category.id }}" id="{{ category.id }}">
        <ion-label class="labelTextCategoria"><b>{{ category.nombre }}</b></ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>


<ion-content [scrollEvents]="true">

    <ion-refresher slot="fixed" (ionRefresh)="ActualizarNoticias($event)">
      <ion-refresher-content
        pullingIcon="arrow-dropdown"
        pullingText="Actualizando Noticias"
        refreshingSpinner="circles"
        refreshingText="Actualizando...">
      </ion-refresher-content>
    </ion-refresher>

    <ion-slides [options]="sliderConfig" (ionSlideDidChange)="CambiarSlide()">

      <ion-slide> 
        <ion-grid>
          <ion-row>
            <ion-col>
              <ion-card class="cardsRow" color="light" *ngFor="let card of cardCat0; let idx=index;">
                <ion-card-header>
                  <ion-card-title text-center class="textoTitulo">{{ card.titulo }}</ion-card-title>
                </ion-card-header>
                <ion-card-content class="cardContent"> 
                  <div *ngIf="card.imagen != ''">
                    <ion-img src="{{ card.imagen }}" (click)="ObtenerDatosCards(card.id)"></ion-img>
                    {{ card.detalle }}
                  </div>

                  <div *ngIf="card.imagen == ''">
                      <ion-label (click)="ObtenerDatosCards(card.id)">{{ card.detalle }}</ion-label>
                  </div>
                  <ion-row>
                    <ion-col col-3 no-padding>
                      <ion-button no-margin text-center fill="clear" style="pointer-events: none;">
                        <ion-icon [name]="card.favorita"></ion-icon> 
                      </ion-button>
                    </ion-col>
                    <ion-col col-3 no-padding>
                      <ion-button no-margin text-center fill="clear" style="pointer-events: none;">
                        <ion-icon [name]="card.alarma"></ion-icon>
                      </ion-button>
                    </ion-col>
                    <ion-col col-3 no-padding>
                      <ion-button no-margin text-center fill="clear" style="pointer-events: none;">
                        <ion-icon [name]="card.guardada"></ion-icon>
                      </ion-button>
                    </ion-col>
                    <ion-col col-3 no-padding>
                      <ion-button no-margin float-right fill="clear" (click)="CargarBotonesOpciones(card)">
                        <ion-icon name="reorder"></ion-icon>
                      </ion-button>
                    </ion-col>
                  </ion-row>
                </ion-card-content>
              </ion-card>

            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-slide>


      <ion-slide>
        <ion-grid>
          <ion-row>
            <ion-col>
              <ion-card class="cardsRow" color="light" *ngFor="let card of cardCat1; let idx=index;">
                <ion-card-header>
                  <ion-card-title text-center class="textoTitulo">{{ card.titulo }}</ion-card-title>
                </ion-card-header>
                <ion-card-content class="cardContent"> 
                  <div *ngIf="card.imagen != ''">
                    <ion-img src="{{ card.imagen }}" (click)="ObtenerDatosCards(card.id)"></ion-img>
                    {{ card.detalle }}
                  </div>

                  <div *ngIf="card.imagen == ''">
                      <ion-label (click)="ObtenerDatosCards(card.id)">{{ card.detalle }}</ion-label>
                  </div>
                  <ion-row>
                    <ion-col col-3 no-padding>
                      <ion-button no-margin text-center fill="clear" style="pointer-events: none;">
                        <ion-icon [name]="card.favorita"></ion-icon> 
                      </ion-button>
                    </ion-col>
                    <ion-col col-3 no-padding>
                      <ion-button no-margin text-center fill="clear" style="pointer-events: none;">
                        <ion-icon [name]="card.alarma"></ion-icon>
                      </ion-button>
                    </ion-col>
                    <ion-col col-3 no-padding>
                      <ion-button no-margin text-center fill="clear" style="pointer-events: none;">
                        <ion-icon [name]="card.guardada"></ion-icon>
                      </ion-button>
                    </ion-col>
                    <ion-col col-3 no-padding>
                      <ion-button no-margin float-right fill="clear" (click)="CargarBotonesOpciones(card)">
                        <ion-icon name="reorder"></ion-icon>
                      </ion-button>
                    </ion-col>
                  </ion-row>
                </ion-card-content>
              </ion-card>


            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-slide>

    </ion-slides>
     <ion-infinite-scroll threshold="50px" (ionInfinite)="AgregarMasNoticias($event)">
        <ion-infinite-scroll-content
          loadingSpinner="bubbles"
          loadingText="Cargando datos...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
</ion-content>


<app-footer></app-footer>



And my ts.code

sliderConfig = {
    slidesPerView: 1.100,
    spaceBetween: 10,
    centeredSlides: true,
    autoHeight: true
  };

ngOnInit() {
    try
    {
      this.LoaderNoticias('Cargando Noticias...');

      this.databaseService.getSesion(1).then(result => {
        this.token = result.valor;
        this.databaseService.getSesion(2).then(result => {
          this.imei = result.valor;

          let datosServicio = { 
            token: this.token,
            imei: this.imei
          };

          this.esqueletoService.CargarCategoriasGenerales(datosServicio).then((result) => {
            if (result != null) 
            {
              let resultCategoria = result.toString().split('|');

              if(resultCategoria[0] == "777")
              {
                this.databaseService.GuardaSQLlite(9,resultCategoria[1]);
                var datosCategoria = JSON.parse(resultCategoria[1]);
                this.listaCategorias = Object.values(datosCategoria); //SE CARGAN LAS CATEGORIAS

                let datosNoticias = { 
                  pagina: 0, 
                  token: this.token,
                  imei: this.imei
                };

                this.esqueletoService.CargarNoticiasGeneral(datosNoticias).then((result) => {
                  if (result != null) 
                  {
                    let datosNoticiaGeneral = result.toString().split('|');

                    if(datosNoticiaGeneral[0] == "777")
                    {
                      this.loadingController.dismiss();
                      var datosVisualizar = JSON.parse(datosNoticiaGeneral[1]);
                      Object.keys(datosVisualizar).forEach(key => {

                        if(datosVisualizar[key]["favorita"] == 0)
                        {
                          datosVisualizar[key]["favorita"] = "star-outline";
                        }
                        else
                        {
                          datosVisualizar[key]["favorita"] = "star";
                        }

                        if(datosVisualizar[key]["alarma"] == 0 )
                        {
                          datosVisualizar[key]["alarma"] = "remove-circle-outline";
                        }
                        else
                        {
                          datosVisualizar[key]["alarma"] = "remove-circle";
                        }

                        if(datosVisualizar[key]["guardada"] == 0 )
                        {
                          datosVisualizar[key]["guardada"] = "folder-open";
                        }
                        else
                        {
                          datosVisualizar[key]["guardada"] = "folder";
                        }
                      });

                      this.cardCat0 = datosVisualizar;
                      this.databaseService.GuardaSQLlite(10,"0"); // SE ALMACENA LA CATEGORIA ACTIVA 
                      this.databaseService.GuardaSQLlite(11,"1"); // SE ALMACENA LA PAGINA ACTUAL CATEGORIA 0 GENERAL
                      this.categories = "0";

                    }
                    else if (datosNoticiaGeneral[0] == "305")
                    {
                      this.loadingController.dismiss();
                      this.MostrarAlerta("Noticias","",datosNoticiaGeneral[2]);
                    }
                    else if (datosNoticiaGeneral[0] == "310")
                    {
                      this.loadingController.dismiss();
                      this.MostrarAlerta("Noticias","",datosNoticiaGeneral[2]);
                    }
                    else if(datosNoticiaGeneral[0] == "315")
                    {
                      this.loadingController.dismiss();
                      this.MostrarAlerta("Noticias","",datosNoticiaGeneral[2]);
                    }
                    else if(datosNoticiaGeneral[0] == "000")
                    {
                      this.loadingController.dismiss();
                      this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
                    }   
                  } else {
                    this.loadingController.dismiss();
                    this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
                  }
                }, (err) => {
                  this.loadingController.dismiss();
                  this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
                });

              }
              else if (resultCategoria[0] == "305")
              {
                this.loadingController.dismiss();
                this.MostrarAlerta("Noticias","",resultCategoria[2]);
              }
              else if (resultCategoria[0] == "310")
              {
                this.loadingController.dismiss();
                this.MostrarAlerta("Noticias","",resultCategoria[2]);
              }
              else if(resultCategoria[0] == "315")
              {
                this.loadingController.dismiss();
                this.MostrarAlerta("Noticias","",resultCategoria[2]);
              }
              else if(resultCategoria[0] == "000")
              {
                this.loadingController.dismiss();
                this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
              }   
            } else {
              this.loadingController.dismiss();
              this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
            }
          }, (err) => {
            this.loadingController.dismiss();
            this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
          });

        }, (err) => {
          this.loadingController.dismiss();
          this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
        });
      },(err) => {
        this.loadingController.dismiss();
        this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
      });
      this.loadingController.dismiss();

    }
    catch(Exception)
    {
      this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
      this.loadingController.dismiss();
    }
  }

AgregarMasNoticias(event)
{
    this.databaseService.getSesion(10).then(resultCategoriaActiva => {
      this.categoriaActiva = resultCategoriaActiva.valor;
      if(resultCategoriaActiva.valor = "0")
      {
        this.databaseService.getSesion(2).then(resultImei => {
          this.imei = resultImei.valor;

          this.databaseService.getSesion(1).then(resultToken => {
            this.token = resultToken.valor;

            this.databaseService.getSesion(11).then(resultPaginaActualCategoria0 => {
              this.paginaActualNoticias = resultPaginaActualCategoria0.valor;

              let datosCargarMasNoticias = { 
                pagina: +this.paginaActualNoticias, 
                token: this.token,
                imei: this.imei,
                categoria: +this.categoriaActiva
              };

              this.esqueletoService.CargarMasNoticias(datosCargarMasNoticias).then((result) => {
                if (result != null) 
                {
                  let datos = result.toString().split('|');

                  if(datos[0] == "777")
                  {
                    var datosVisualizar = JSON.parse(datos[1]);

                    if(datosVisualizar.length > 0)
                    {
                      Object.keys(datosVisualizar).forEach(key => {

                        if(datosVisualizar[key]["favorita"] == 0)
                        {
                          datosVisualizar[key]["favorita"] = "star-outline";
                        }
                        else
                        {
                          datosVisualizar[key]["favorita"] = "star";
                        }

                        if(datosVisualizar[key]["alarma"] == 0 )
                        {
                          datosVisualizar[key]["alarma"] = "remove-circle-outline";
                        }
                        else
                        {
                          datosVisualizar[key]["alarma"] = "remove-circle"; 
                        }

                        if(datosVisualizar[key]["guardada"] == 0 )
                        {
                          datosVisualizar[key]["guardada"] = "folder-open";
                        }
                        else
                        {
                          datosVisualizar[key]["guardada"] = "folder";
                        }
                        this.cardCat0.push(datosVisualizar[key]);
                      });
                      this.databaseService.GuardaSQLlite(11,((+this.paginaActualNoticias + 1).toString())); // SE ALMACENA LA PAGINA ACTUAL CATEGORIA 0 GENERAL
                      event.target.complete();
                    }
                    else
                    {
                      event.target.complete();
                    }
                  }
                  else if (datos[0] == "305")
                  {
                    this.MostrarAlerta("Noticias","",datos[2]);
                    event.target.complete();
                  }
                  else if (datos[0] == "310")
                  {
                    this.MostrarAlerta("Noticias","",datos[2]);
                    event.target.complete();
                  }
                  else if(datos[0] == "315")
                  {
                    this.MostrarAlerta("Noticias","",datos[2]);
                    event.target.complete();
                  }
                  else if(datos[0] == "000")
                  {
                    this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
                    event.target.complete();
                  }   
                } else {
                  this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
                  event.target.complete();
                }
              }, (errorDatosNoticias) => {
                this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
                event.target.complete();
              });

            }, (errorPaginaActual) => {
              this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
              event.target.complete();
            });
          }, (errorToken) => {
            this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
            event.target.complete();
          });
        }, (errorImei) => {
          this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
          event.target.complete();
        });
      }



      else if(resultCategoriaActiva.valor = "1")
      {
        this.databaseService.getSesion(2).then(resultImei => {
          this.imei = resultImei.valor;

          this.databaseService.getSesion(1).then(resultToken => {
            this.token = resultToken.valor;

            this.databaseService.getSesion(12).then(resultPaginaActualCategoria0 => {
              this.paginaActualNoticias = resultPaginaActualCategoria0.valor;

              let datosCargarMasNoticias = { 
                pagina: +this.paginaActualNoticias, 
                token: this.token,
                imei: this.imei,
                categoria: +this.categoriaActiva
              };

              this.esqueletoService.CargarMasNoticias(datosCargarMasNoticias).then((result) => {
                if (result != null) 
                {
                  let datos = result.toString().split('|');

                  if(datos[0] == "777")
                  {
                    var datosVisualizar = JSON.parse(datos[1]);

                    if(datosVisualizar.length > 0)
                    {
                      Object.keys(datosVisualizar).forEach(key => {

                        if(datosVisualizar[key]["favorita"] == 0)
                        {
                          datosVisualizar[key]["favorita"] = "star-outline";
                        }
                        else
                        {
                          datosVisualizar[key]["favorita"] = "star";
                        }

                        if(datosVisualizar[key]["alarma"] == 0 )
                        {
                          datosVisualizar[key]["alarma"] = "remove-circle-outline";
                        }
                        else
                        {
                          datosVisualizar[key]["alarma"] = "remove-circle"; 
                        }

                        if(datosVisualizar[key]["guardada"] == 0 )
                        {
                          datosVisualizar[key]["guardada"] = "folder-open";
                        }
                        else
                        {
                          datosVisualizar[key]["guardada"] = "folder";
                        }
                        this.cardCat1.push(datosVisualizar[key]);
                      });
                      this.databaseService.GuardaSQLlite(12,((+this.paginaActualNoticias + 1).toString())); // SE ALMACENA LA PAGINA ACTUAL CATEGORIA 1
                      event.target.complete();
                    }
                    else
                    {
                      event.target.complete();
                    }
                  }
                  else if (datos[0] == "305")
                  {
                    this.MostrarAlerta("Noticias","",datos[2]);
                    event.target.complete();
                  }
                  else if (datos[0] == "310")
                  {
                    this.MostrarAlerta("Noticias","",datos[2]);
                    event.target.complete();
                  }
                  else if(datos[0] == "315")
                  {
                    this.MostrarAlerta("Noticias","",datos[2]);
                    event.target.complete();
                  }
                  else if(datos[0] == "000")
                  {
                    this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
                    event.target.complete();
                  }   
                } else {
                  this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
                  event.target.complete();
                }
              }, (errorDatosNoticias) => {
                this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
                event.target.complete();
              });

            }, (errorPaginaActual) => {
              this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
              event.target.complete();
            });
          }, (errorToken) => {
            this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
            event.target.complete();
          });
        }, (errorImei) => {
          this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
          event.target.complete();
        });
      }



      else if(resultCategoriaActiva.valor = "2")
      {
        this.databaseService.getSesion(2).then(resultImei => {
          this.imei = resultImei.valor;

          this.databaseService.getSesion(1).then(resultToken => {
            this.token = resultToken.valor;

            this.databaseService.getSesion(13).then(resultPaginaActualCategoria0 => {
              this.paginaActualNoticias = resultPaginaActualCategoria0.valor;

              let datosCargarMasNoticias = { 
                pagina: +this.paginaActualNoticias, 
                token: this.token,
                imei: this.imei,
                categoria: +this.categoriaActiva
              };

              this.esqueletoService.CargarMasNoticias(datosCargarMasNoticias).then((result) => {
                if (result != null) 
                {
                  let datos = result.toString().split('|');

                  if(datos[0] == "777")
                  {
                    var datosVisualizar = JSON.parse(datos[1]);

                    if(datosVisualizar.length > 0)
                    {
                      Object.keys(datosVisualizar).forEach(key => {

                        if(datosVisualizar[key]["favorita"] == 0)
                        {
                          datosVisualizar[key]["favorita"] = "star-outline";
                        }
                        else
                        {
                          datosVisualizar[key]["favorita"] = "star";
                        }

                        if(datosVisualizar[key]["alarma"] == 0 )
                        {
                          datosVisualizar[key]["alarma"] = "remove-circle-outline";
                        }
                        else
                        {
                          datosVisualizar[key]["alarma"] = "remove-circle"; 
                        }

                        if(datosVisualizar[key]["guardada"] == 0 )
                        {
                          datosVisualizar[key]["guardada"] = "folder-open";
                        }
                        else
                        {
                          datosVisualizar[key]["guardada"] = "folder";
                        }
                        this.cardCat2.push(datosVisualizar[key]);
                      });
                      this.databaseService.GuardaSQLlite(13,((+this.paginaActualNoticias + 1).toString())); // SE ALMACENA LA PAGINA ACTUAL CATEGORIA 2
                      event.target.complete();
                    }
                    else
                    {
                      event.target.complete();
                    }
                  }
                  else if (datos[0] == "305")
                  {
                    this.MostrarAlerta("Noticias","",datos[2]);
                    event.target.complete();
                  }
                  else if (datos[0] == "310")
                  {
                    this.MostrarAlerta("Noticias","",datos[2]);
                    event.target.complete();
                  }
                  else if(datos[0] == "315")
                  {
                    this.MostrarAlerta("Noticias","",datos[2]);
                    event.target.complete();
                  }
                  else if(datos[0] == "000")
                  {
                    this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
                    event.target.complete();
                  }   
                } else {
                  this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
                  event.target.complete();
                }
              }, (errorDatosNoticias) => {
                this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
                event.target.complete();
              });

            }, (errorPaginaActual) => {
              this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
              event.target.complete();
            });
          }, (errorToken) => {
            this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
            event.target.complete();
          });
        }, (errorImei) => {
          this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
          event.target.complete();
        });
      }
    }
}