Ionic práctico: App con REST

Recuperación de los datos de slide

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Teniendo ya montado el sistema de navegación a través de los datos de la Home, necesitaremos recibir los datos completos del registro que se está viendo en el slider, así que veremos cómo enlazar el slide con el servicio que recupera los datos completos de registro,

Transcripción

(hombre) En este vídeo voy a hacer una tarea un poco más compleja, voy a hacer que se carguen todos los datos. Pero para que se carguen todos los datos, no me sirven los datos que ahora mismo tengo almacenados, porque, si nos fijamos, solamente tengo cuatro del total de todos ellos. Voy a volver de nuevo al Sub line text y vamos a ver que puedo hacer, lo primero. Este Slide necesita tener, de alguna forma, recuperar cuando hubo un cambio de Slide, y para ello tenemos el "ionDidChange" así que voy a añadir este evento, "ionDidChange" Este evento "ionDidChange", que voy a hacer que llame a un método, que luego tendré que añadir, dentro del controlador, por ejemplo "onSLideChanged", voy a copiar este nombre del método, y ahora me voy al Home.ts, y voy a crearlo, voy a ir un poco más abajo, y voy a crear este método, como digo, este método tiene que recuperar de alguna manera, sobre qué Slide estoy en algún momento determinado, pero para ello, lo primero que necesito es tener una referencia de este Slider, si no tengo una referencia sobre él, estoy pérdido. Y para poder tener esa referencia sobre él, voy a necesitar hacer una importación sobre este Slide, en vez de hacerlo enterlo, casi que voy a copiarlo y pegarlo, como digo... voy a recuperar el Slide, y lo voy a recuperar desde ionic-Angular aquí lo tendré, ya tengo la posibilidad de trabajar con Slides, pero necesito la posibilidad de recuperar el objeto en sí mismo, y para recuperar un objeto que tengo colocado dentro del HTML, tengo una estrategia que es el View Child, se utiliza el "@ViewChild" se pasa como parámetro el identificador y luego lo voy a asociar con tipo Slider. Me voy a volver atras, voy a recuperar entonces este identificador, voy a volver de nuevo al controlador y aquí voy a poner entre comillas "My Slider". Ahora sí, ahora voy a poder trabajar con un Slider, voy a volver a la parte de abajo. En la documentación de los Slides de IONIC 2, se ve fácilmente que para recuperar un Slider, se utiliza primero recuperar la estancia de un Slider, "This.Slider" y luego el "GetActiveIndex". Gracias a esto ya he almacenado en este "CurrentIndex", el valor que voy a necesitar. Es un valor que voy a necesitar en muchos sitios, porque voy a hacer varias tareas distintas con él, por ejemplo, voy a necesitar que cuando se haga clic en un botón, sea visto una vez más ese pájaro en esa localización en concreto, por ejemplo, pero también me va a servir para cargar datos. Así que, podría crear una nueva variable que se podría llamar Slided Index, de hecho voy a crearla porque la utilizaré más adelante aunque ahora mismo no. "SlideIndex", a la que podría asociar el valor cero, por ejemplo, o puedo no ponerle ningún valor. Como digo, ese "SlideIndex" me va a servir para más adelante, reutilizarlo a mi gusto. Por otro lado, además de eso necesitaré cargar datos, así que voy a crear una nueva función, voy a crear una función que se ocupe de hacer una carga parecida a esta, de hecho voy a cargar ese código, pero que en vez de ser igual, va a ser, como digo, parecida. Se va a ocupar de cargar los datos de ese Slide en concreto, así que utilizo los "SlideData", le voy a pasar un Index, porque quiero que me cargue un elemento en concreto. Como decía, aquí es donde voy a utilizar este servicio, pero en vez de utilizar el servicio "GetOn", utilizaré el "GetOne", y este servicio de "GetOne", me exige que le pase un parámetro, que va a ser el parámetro Index. De hecho, en realidad tengo más posibilidades, por que, por ejemplo, también podría recuperar los datos del pájaro en concreto, esto podría ser útil para enviarlos a cualquier sitio, para ello simplemente necesitaría utilizar "this.pajaros", y entre corchetes ese Index, y así me devolvería los datos de esos pájaros, de hecho, puedo pedir que estos se creen en una variable Datos. Y es que, en concreto aquí, si yo enviara este Index, este Index que voy a pasar en realidad es el índece de la diapositiva, quiero decir, es el número de diapositiva, pero no es el Index interno que tiene la base de datos de pájaro, con lo cual no me serviría de nada, sí me sirve para recuperar el pájaro, pero no el ID, así que, en vez de poner ese Index voy a sustituir este por un ID, y ahora sí, voy a pasar el identificador pero me tiene que devolver los datos correctos. Estos datos correctos, ahora, puedo trabajar con ellos, por ejemplo, puedo crear una variable, que la crearé ahora, This.Lot, que sea igual a, y ahora recupero de los datos recibidos pues en concreto, el valor Latitud, también crearé una variable Long, y que sea la Longitud. Como digo, estos datos puedo utilizarlos, y de hecho con este Console, puedo hacer ahora fácilmente que se vean los datos que se están cargando cuando cambio de diapositiva. Me queda todavía una cosa por hacer, y es que cuando se hace el cambio, le estoy pidiendo que recupere el Index, pero necesito que se haga la carga, así que lo que voy a hacer será pasarle este método, aquí está el Current Index, y con ello hacer que se ejecute la carga correctamente. Otra pega que tiene esto es que estos datos se van a cargar una vez que he cargado la primera diapositiva, de todas formas voy a asegurarme que no haya ningún error, y aquí podemos ver que hay unos cuantos, vamos a ver, en principio, tengo un problema con este ViewChild, para poder utilizar este ViewChild necesito inyectar ese ViewChild dentro de la vista, así que voy a añadir la importación del Core, la importación de los elementos del núcleo, aquí es el ViewChild, de hecho voy a añadir un ElementRef, porque más adelante lo voy a necesitar. Bueno, vamos a dejar que se compile. Siguiente error, vamos a ver en la línea 49 necesito añadir bastantes cosas, por ejemplo, necesito crear estas variables Lat y Long, así que voy a crearlas, Lat... y Long, eso por un lado. Por otro lado, no me está detectando esta llamada "LoadSlideData" porque debería tener un "This" delante. Aquí lo tengo. Voy a guardar de nuevo, voy a compilar, ahora ya debería limpiarse un poco, casi está listo, no me está encontrando el GetOne así que voy a mirar a ver porque probablemente lo haya llamado de otra manera, BirdsService... GetOne... Vale. Este está correcto, le cambié de nombre sin querer, no pasa nada, lo guardo, vuelvo de nuevo a la compilación. El desarrollo con IONIC es complicado por tanto no es difícil tener algún tipo de pequeños errores sobre todo cuando se hacen tareas complicadas como la que estoy haciendo ahora. Voy a abrir ya el navegador, porque ahora sí que no hay ningún error más. Y aquí vemos como cuando cambio de diapositiva me pide los datos del segundo, y además me muestra el objeto con estos datos del segundo, que tiene ya todos los datos. o sea, que ya he conseguido un sistema que me va a cargar los datos de la diapositiva en concreto cuando la vaya a necesitar y solo en ese momento.

Ionic práctico: App con REST

Practica creando una aplicación con Ionic, gracias a la combinación de AngularJS, HTML5 y un back-end basado en PHP para servir datos a tu app así como modificar registros.

3:00 horas (38 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.