Bien, continuamos con el ejemplo, vamos a crear el listado de clientes en el componente clientes.
Nos vamos a clientes, clientes component y acá vamos a tener un atributo del tipo cliente, pero un
arreglo igual y le asignamos un valor.
Recordemos que los regalos se definen con los corchete y acá va a ir cada objeto en la lista.
Pero para poder utilizar cliente, que es una clase que está en el archivo cliente descrip, la tenemos
que importar entonces con import.
From.
Y acá sería el archivo punto larch líente punto com.
De que la atención no va a importamos la clase y simplemente acá se define el arreglo Yeison con los
sujetos.
Por ejemplo, siempre usando llaves para definir un objeto.
El atributo recaería el valor.
El siguiente atributo acaecía el valor el siguiente y Maile con el valor y la fecha y también el Heidy.
Por ejemplo, el Heidy es un Ámber en numerico, se tiene que definir como un número sin comillas,
ya que no es un estric.
El correo y una fecha.
Ahí tenemos un primer objeto y pueden crear lo que quieran.
Después con el Heidy 2, con el Heidy 3.
En fin, yo acabo de copiar y pegar una lista de varios objetos cliente con datos de ejemplo.
Lo importante para crear una lista de objetos cliente objetos con formato JSON se tablece el tipo de
la clase y dar valor a los atributos del objeto a Leidy nombre, apellido AT y el email.
Entonces Heidy nombre, apellido y mail crédit at que sería la fecha?
Ahí tenemos el listado.
Guardamos y el siguiente paso es implementar la vista para poder mostrar el listado cliente.
Bien, vámonos a ButrÃn para escoger un panel.
Un Carth para nuestra tabla.
Para nuestro listado cliente.
Vamos a la página de vuestra puntocom documentación buscamos Carth los paneles y acá tenemos varios
ejemplos.
Un montón de ejemplo.
Acá hay varios colores.
Y un poco más abajo, unos paneles bien atractivo, de un color gris light y con un borde de color.
Por ejemplo, podríamos tomar el primero con color azul, con borde azul.
Simplemente acá lo copian.
No es necesario que copien todos los paneles.
Solamente eligen el que quieran.
El color lo seleccionan, lo copian.
Volvemos al auto y pegamos, por ejemplo, en Carp getter clientes y acá en el Car Titty título colocamos
listado de clientes o lo que queramos.
Y justamente acá vamos a borrar el párrafo.
Acá vamos a tener la tabla con un terre, los terre con TH.
Acá vamos a tener un TGA.
Vamos a muerto esto dentro del TGA.
Acá vamos a tener el The Way
y prácticamente va a tener lo mismo en el Tebow.
Pero en vez de TH este de.
Entonces vamos a tener un TH para el Heidy.
Nombre, el apellido, el email y la fecha.
Y acá hay que ver cuál es el elemento que se va a repetir utilizando en DEFOR.
Haga que se repita ese día el terre.
Cada fila.
Entonces acá tenemos que utilizar un.
En Gifford, como vimos simplemente con el ñí f o for doble click en Gifford y automáticamente nos genera
la estructura de la iteración del for.
Entonces let acá cliente off clientes que sería el atributo de la clase clientes component clientes.
Y por cada uno vamos a mostrar con las llaves interpolación de string.
Vamos a mostrar el cliente.
Punto Heidy Nombre, apellido y fecha.
Bien, entonces, con esto, a través del punto, es decir, el objeto de cada el objeto actual del
loop de la iteración, invocamos el atributo Heidy, el atributo nombre Lapido y Maybe y la fecha,
la fecha es Crédit Excretado.
Bien, simplemente sería de esa forma.
Ahora faltaría dar un poco de estilos a la tabla.
Bien, y con eso tenemos.
Vamos a guardar.
Y qué faltaría ahora para que esto funcione y se muestre en el navegador.
Recordemos que siempre nuestro componente principal es el app componente.
Lo tenemos en la raíz del app y este sería la vista que sería nuestro layout.
Lo podríamos mostrar acá.
Por ejemplo, podemos quitar directiva, la podríamos quitar y dejar a clientes ahí guardados, ya que
el selector de clientes component es app clientes acá lo tenemos configurado y también en App Module
también tenemos registrado Cliente Company.
Está todo listo, todo para que funcione.
Ahora nos vamos a la consola y vamos a ejecutar.
Bien.
Y ahí tenemos nuestra aplicación funcionando.
Quizás faltaría arreglar un poco acá el estilo, ya que el panel era un poco más pequeño que la tabla.
Si nos vamos a la vista clientes component.
Acá tiene un máximo ancho.
Simplemente se lo podemos quitar.
Ese máximo ancho que viene de ejemplo.
Lo vamos a guardar.
Volvemos.
Y ahí está.
Perfecto.
Ahí está nuestro panel, nuestro Kaur completo con la tabla y queda bastante bien.
Por ahora quedamos hasta acá y en la siguiente clase vamos a desacoplar el listado de cliente.
El arreglo de objeto de clientes del componente y lo vamos a llevar a un archivo por separado.
La cosa es que podamos importar este listado y lo podamos incluir en otro componente.
Pero siempre desacoplar para que de mejor forma posible.
Y por supuesto, después estos datos del cliente van a provenir desde un paquete utilizando el API Rest
de Spring 5.
Bien, hasta la próxima.