Angular 22
Ejercicios de Angular sobre Control de flujo
10 ejercicios de Control de flujo en Angular. Piensa la respuesta antes de abrirla: la explicación dice por qué las demás opciones fallan.
1 · Elige la respuesta · nivel 1
Si items() es un array vacío, ¿qué se muestra?
@for (item of items(); track item.id) { <li>{{ item.name }}</li>} @empty { <li>Sin resultados</li>}- ASin resultados
- BNada
- CUn <li> vacío
- DUn error: @empty solo vale con @if
Ver la respuesta
Respuesta: A. Sin resultados
El bloque @empty de un @for se muestra cuando la colección no tiene elementos. Evita añadir un @if aparte solo para ese caso.
2 · Elige la respuesta · nivel 1
Si loggedIn() es false, ¿qué se muestra?
@if (loggedIn()) { <p>Bienvenido</p>} @else { <p>Inicia sesión</p>}- AInicia sesión
- BBienvenido
- CLas dos cosas
- DNada
Ver la respuesta
Respuesta: A. Inicia sesión
@if muestra su bloque cuando la condición es verdadera; si no, se muestra el bloque de @else.
3 · Elige la respuesta · nivel 1
Si fruits() vale ['kiwi', 'uva', 'pera'], ¿cuántos <li> se pintan?
<ul> @for (fruit of fruits(); track fruit) { <li>{{ fruit }}</li> }</ul>- A3
- B1
- C0
- D4
Ver la respuesta
Respuesta: A. 3
@for repite su bloque una vez por cada elemento de la colección. track le dice a Angular cómo identificar cada elemento.
4 · Encuentra el fallo · nivel 1
La plantilla no compila. ¿Qué línea tiene el fallo?
1@if (stock() > 0) {2 <p>Disponible</p>3} else {4 <p>Agotado</p>5}Ver la respuesta
El fallo está en la línea 3:
} else {Se arregla con} @else {.En la sintaxis de control de flujo de Angular, la rama alternativa también lleva arroba: @else.
5 · Completa el hueco · nivel 1
Completa la plantilla con la sintaxis de control de flujo.
___ (user(); as u) { <p>Hola, {{ u.name }}</p>} ___ { <p>Inicia sesión</p>}- @if
- @else
- *ngIf
- @switch
- @empty
- ng-template
Ver la respuesta
Respuesta: @if · @else
@if (user(); as u) { <p>Hola, {{ u.name }}</p>} @else { <p>Inicia sesión</p>}@if y @else sustituyen a *ngIf con ng-template. Con as u se guarda el resultado de la expresión para usarlo dentro del bloque.
6 · Ordena las líneas · nivel 1
Ordena la plantilla que muestra Sobresaliente, Aprobado o Suspenso según la nota.
- <p>Aprobado</p>
- <p>Sobresaliente</p>
- <p>Suspenso</p>
- }
- } @else {
- } @else if (score() >= 5) {
- } else if (score() >= 5) {
- @if (score() >= 9) {
Ver la respuesta
El orden correcto:
@if (score() >= 9) { <p>Sobresaliente</p>} @else if (score() >= 5) { <p>Aprobado</p>} @else { <p>Suspenso</p>}Sobran: } else if (score() >= 5) {
Las condiciones se comprueban en orden, así que la más exigente va primero. En la sintaxis de control de flujo, cada rama lleva @: @else if y @else.
7 · Ordena las líneas · nivel 1
Ordena la plantilla que pinta una lista con un <li> por cada tarea.
- <li>{{ task }}</li>
- }
- @for (task in tasks(); track task) {
- @for (task of tasks(); track task) {
- </ul>
- <ul>
Ver la respuesta
El orden correcto:
<ul> @for (task of tasks(); track task) { <li>{{ task }}</li> }</ul>Sobran: @for (task in tasks(); track task) {
@for usa of para recorrer la colección y va dentro de la lista, porque lo que se repite es cada <li>. in es la palabra de otros lenguajes.
8 · Ordena las líneas · nivel 1
Ordena la plantilla que muestra un aviso solo si hay errores.
- <p>Revisa el formulario</p>
- }
- @if (hasErrors()) {
- if (hasErrors()) {
Ver la respuesta
El orden correcto:
@if (hasErrors()) { <p>Revisa el formulario</p>}Sobran: if (hasErrors()) {
El bloque condicional de las plantillas empieza por @if. Sin la arroba, Angular lo trata como texto normal.
9 · Elige la respuesta · nivel 2
¿Qué le falta a este bucle para compilar?
@for (item of items) { <li>{{ item.name }}</li>}- Atrack item.id, o la expresión que identifique cada elemento
- BUn *ngFor en el <li>
- CDeclarar let item
- DNada, compila tal cual
Ver la respuesta
Respuesta: A. track item.id, o la expresión que identifique cada elemento
En @for, track es obligatorio: le dice a Angular cómo identificar cada elemento para reutilizar el DOM en vez de recrearlo.
10 · Completa el hueco · nivel 2
Completa para numerar los usuarios y mostrar un aviso si no hay ninguno.
@for (user of users(); track user.id; let i = ___) { <li>{{ i + 1 }}. {{ user.name }}</li>} ___ { <li>No hay usuarios</li>}- $index
- @empty
- index
- $count
- @else
- @none
Ver la respuesta
Respuesta: $index · @empty
@for (user of users(); track user.id; let i = $index) { <li>{{ i + 1 }}. {{ user.name }}</li>} @empty { <li>No hay usuarios</li>}@for ofrece variables implícitas como $index, $count, $first y $last, y se les puede dar un alias con let. El bloque para una colección vacía es @empty.