Greetings everyone
I am working with slides and cards inside the slides which I load with data without problems. I have the problem with the ion-infinite-scroll events because when I reload more data on the card it loads them correctly, but when I change the slide, the active slide remains with the height of the previous slide.
I have searched for information about it and there is an attribute called “autoHeight” which is set to true in the slider settings. When I do this and reload the data from 0 the slide shows me a small area with the card data but they are almost not displayed. I enclose images with the aforementioned:
Then I will attach the code that I execute:
type or paste code here
```<ion-header>
<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();
});
}
}
}
I know that the code is something long and try to summarize it as much as I could, I ask the relevant apologies of the case.
As an attachment, I have seen in forums about this problem and I have seen an ionSliders function called "updateAutoHeight" but so far I could not make it work:
@ViewChild (IonSlides) slides: IonSlides;
this.slides.updateAutoHeight (400);
All the help you could give me, even if they are with ideas, I would greatly appreciate it since the time has come that I don't know what else to do about it to make the height of my cards work well when I initialize the application or add more data