11 KiB
Mostrar una lista de selección
En esta página, ampliaremos la aplicación Tour de Héroes para mostrar una lista de héroes, Permite al usuario seleccionar un héroe y ver los detalles del héroe.
Para ver la aplicación de ejemplo que describe esta página, consulta el .
Crea un simulacro de héroe
Primero, necesitarás algunos héroes para mostrar. Eventualmente los obtendrá de un servidor de datos remoto. Por ahora, creará algunos héroes simulados y pretenderá que provienen del servidor.
Crea un archivo llamado mock-heroes.ts en la carpeta src/app/.
Define la constante HEROES como un conjunto de 10 héroes y expórtala.
El archivo se verá así:
Mostrar Héroes
Abre el archivo de clase HeroesComponent e importe el mock HEROES.
En el mismo archivo (clase HeroesComponent), define una propiedad de componente llamada heroes para exponer el array HEROES para la vinculación.
Enumerar héroes con *ngFor
Abre las Plantillas HeroesComponent y realiza los siguientes cambios:
- Agrega
<h2>al principio - Agrega una lista HTML desordenada (
<ul>) debajo de ella - Inserta
<li>dentro del<ul>que muestra la propiedadhero - Espolvoreé algunas clases CSS al estilo (agregaremos estilos CSS en breve)
Se parece a esto:
Esto muestra un héroe. Para enumerarlos a todos, agrega *ngFor* a <li> para iterar sobre la lista de héroes.
*ngFor es la directiva de repetición de Angular.
Esto repite el elemento host para cada elemento de la lista.
La sintaxis para este ejemplo es:
<li>es un elemento hostheroeses una lista de clasesHeroesComponentque contiene la lista de héroes simuladosherocontiene el objeto héroe actual en una lista para cada ciclo
No olvides el asterisco (*) antes del ngFor. Esta es una parte importante de la sintaxis.
Actualiza tu navegador para ver la lista de héroes.
{@a styles}
Agregar estilo a los héroes
La lista de héroes debe ser atractiva y visualmente prominente cuando el usuario coloca el cursor y selecciona un héroe de la lista.
En el Primer tutorial, configuro el estilo básico de toda la aplicación en styles.css.
No incluí el estilo de la lista de héroes en esta hoja de estilo.
Puedes agregar más estilos a styles.css y seguir expandiendo esa hoja de estilo a medida que agrega componentes
Es posible que prefieras definir un estilo privado para un componente en particular y mantener todo lo que el componente necesita — código, HTML, CSS— en un solo lugar.
Este enfoque facilita la reutilización del componente en otro lugar y aún así proporciona al componente la apariencia deseada, incluso cuando los estilos aplicados globalmente son diferentes.
Los estilos privados se definen en línea dentro de la matriz @Component.styles o como un archivo de hoja de estilo identificado en una matriz particular @Component.styleUrls como un archivo de hoja de estilo.
Cuando la CLI crea un HeroesComponent, se crea un heroes.component.css vacío para el HeroesComponent.
@Component.styleUrls se señala de esta manera.
Abre heroes.component.css y pega el estilo privado para HeroesComponent.
Puedes encontrarlos en la Revisión del código final al final de esta guía.
@Component Los estilos y las hojas de estilo identificados en los metadatos se definen en un componente en particular.
El estilo heroes.component.css solo se aplica a HeroesComponent y no afecta a otros HTML o HTML dentro de ningún otro componente.
Maestro/Detalle
Cuando haces clic en un héroe en la lista maestro, el componente debe mostrar los detalles del héroe seleccionado en la parte inferior de la página.
En este capítulo, esperemos a que se haga clic en el elemento del héroe y luego actualiza los detalles del héroe.
Agregar enlace de evento de clic
Agrega el enlace de evento click a su <li> así:
Este es un ejemplo de la sintaxis de Angular enlace de eventos .
Los paréntesis alrededor del clic le dicen a Angular que es un evento clic para el elemento <li>.
Cuando el usuario hace clic en <li>, Angular ejecuta la expresión onSelect(hero).
En la siguiente sección, definiremos el método onSelect() en el HeroesComponent para mostrar los héroes definidos por las expresiones *ngFor.
Agregar un controlador de eventos de clic
Cambia el nombre de la propiedad hero del componente a selectedHero, pero no la asignes todavía.
No hay héroe seleccionado cuando se inicia la aplicación.
Agrega el método onSelect() de la siguiente manera y asigne el héroe en el que se hizo clic desde Plantillas al componente 'seleccionadoHero`.
Agregar una sección de detalles
Actualmente, el componente Plantillas tiene una lista.
Para hacer clic en un héroe en la lista para ver los detalles de ese héroe, necesita una sección de detalles para representarlo en Plantillas.
Agrega lo siguiente debajo de la sección de la lista de heroes.component.html.
Cuando actualizo el navegador, la aplicación está rota.
Abre y busca las herramientas de desarrollador de su navegador y busca un mensaje de error como este en la consola:
HeroesComponent.html:3 ERROR TypeError: no se puede leer la propiedad 'nombre' de undefined¿Que pasó?
Cuando inicia la aplicación, selectedHero es intencionalmente indefinido`.
Los enlaces de expresión en Plantillas que se refieren a las propiedades de selectedHero - expresiones como{{{selectedHero.name}}deben fallar porque el héroe seleccionado no existe, no.
Reparemos-use *ngIf para ocultar detalles vacíos
El componente solo debe mostrar detalles para el héroe seleccionado si selectedHero está presente.
Adjunta los detalles del héroe en HTML <div>.
Agrega la directiva angular *ngIf a su <div> y configúrelo en selectedHero.
No olvides el asterisco (*) antes del ngIf. Esta es una parte importante de la sintaxis.
Actualiza su navegador y verá la lista de nombres nuevamente. El área de detalles está en blanco. Hace clic en un héroe en la lista de héroes para ver más detalles. La aplicación comenzó a funcionar nuevamente. Los héroes se muestran en la lista, y los detalles del héroe seleccionado se muestran en la parte inferior de la página.
Por qué esto funciona
Cuando selectedHero no está definido, ngIf elimina los detalles del héroe del DOM. No hay obligación de preocuparse por selectedHero.
Cuando el usuario selecciona un héroe, selectedHero tiene un valor y ngIf inserta los detalles del héroe en el DOM.
Dar estilo a el héroe seleccionado
Si todos los elementos <li> se parecen, es difícil identificar al héroe seleccionado en la lista.
Si el usuario hace clic en "Magneta", el héroe debe dibujarse con un color de fondo prominente como este:
El color del héroe seleccionado es el trabajo de la clase CSS .selected en el estilo que acaba de agregar.
Simplemente aplica la clase .selected a <li> cuando el usuario hace clic.
El enlace de clasede Angular facilita la adición y eliminación de clases CSS condicionales.
Simplemente agregue [class.some-css-class] =" some-condition" al elemento que desea decorar.
Agrega el enlace [class.selected] al <li> en HeroesComponent Plantillas:
Si el héroe de la fila actual es el mismo que de selectedHero, Angular agrega una clase CSS selected.Cuando los dos héroes son diferentes, Angular eliminará la clase.
El <li> completado se ve así:
{@a final-code-review}
Revisión final del código
Aquí está el archivo de código en esta página que incluye el estilo HeroesComponent.
Resumen
- La aplicación "Tour de Héroes" muestra una lista de héroes en la pantalla Maestro / Detalle
- El usuario puede seleccionar un héroe y ver los detalles de ese héroe
- Utilizó
*ngForpara mostrar la lista - Utilizó
*ngIfpara incluir o excluir condicionalmente bloques de HTML - La clase de estilo CSS se puede cambiar con el enlace
class