Cómo usar la directiva angular ngFor

Angular usa directivas para representar dinámicamente ciertos elementos HTML en su sitio web. Una de las directivas estructurales que puede usar es ngFor.

La directiva ngFor le permite repetir el mismo bloque una cantidad específica de veces, o recorrer una matriz de objetos para mostrar sus detalles. Es una herramienta poderosa que incluso puede usar para renderizar objetos dentro de otros objetos.

También tiene muchas funciones que pueden ser útiles en escenarios específicos. Esto incluye encontrar el primer y el último elemento o saltarse ciertos elementos.

Cómo usar ngFor para recorrer números estáticos

La directiva ngFor se basa en el ciclo for, uno de muchos bucles útiles compatibles con JavaScript. A partir de la versión actual de Angular (14), deberá crear una matriz que tenga la cantidad de elementos que desea recorrer.

1. Puede crear una lista dentro de la propia instrucción ngFor. El siguiente código repetirá un párrafo cinco veces, utilizando los índices 0 a 4:

   <div *ngFor='let elemento de [0, 1, 2, 3, 4]; sea ​​i = índice'>
   <pags> Este es un párrafo repetido: {{item}} </pags>
   </div>

2. Dado que el método anterior puede no ser adecuado para matrices grandes, también puede crear dinámicamente una matriz en el archivo TypeScript:

   exportar claseEjemploClaseimplementosOnInit{
    números: matriz<número> = [];
   constructor() {
   // Esto creará dinámicamente la siguiente matriz:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   este.numeros = Formación(10).llenar(1).mapa((x, i)=>i);
    }
   }

3. Luego puede recorrer la matriz de números en el HTML:

   <div *ngFor='dejar artículo de números; sea ​​i = índice'>
   <pags>Este es un párrafo repetido: {{item}}</pags>
   </div>

Cómo omitir o aplicar estilo a ciertos números

Puedes usar el extraño o incluso ngFor variables para determinar cada segundo número. Un escenario en el que puede encontrar esto útil es si desea diseñar cada fila impar o par en una tabla con un color diferente.

1. En el archivo CSS de un componente, agregue algunas clases CSS nuevas. Estos son los estilos que usará para ciertos elementos en índices pares o impares:

   .rojo {
    color rojo;
   }
   .azul { 
    color azul; 
   }
   

2. Declare variables pares e impares dentro de la instrucción ngFor. Estas son variables que Angular reconocerá. Asigne la clase CSS roja a los números pares y la clase CSS azul a los números impares:

   <div *ngFor='dejar artículo de números; let impar = impar; dejar incluso = incluso' [Claseng]="{rojo: par, azul: impar}">
   <pags> Este es un párrafo repetido: {{item}} </pags>
   </div>

3. Ejecute su sitio web Angular usando ng servir y ábralo en el navegador web. Los elementos HTML pares e impares se alternarán entre los diferentes estilos en función de su clase CSS:
4. Si desea omitir todos los números pares por completo, puede usar la directiva ngIf. Esto omitirá todos los números impares y solo mostrará los números pares:

   <div *ngFor='dejar artículo de números; dejar incluso = incluso'>
   <p *ngIf='incluso'> Este es un párrafo repetido: {{item}} </pags>
   </div>

Cómo contar hacia atrás

Para contar hacia atrás, puede usar métodos tradicionales como invertir una lista o contar hacia atrás a través del bucle usando un índice.

1. Declare una variable de índice en la instrucción ngFor. Dentro de ngFor, comience desde la longitud de la matriz y deduzca la cantidad de elementos que ya ha recorrido:

   <div *ngFor="dejar artículo de números; sea ​​i = índice;">
   <pags> Este es un párrafo repetido: {{numbers.length-i-1}} </pags>
   </div>

2. También puede crear una lista invertida en el archivo TypeScript:

   exportar claseEjemploClaseimplementosOnInit{
    números: matriz<número> = [];
    Lista invertida: matriz<número> = [];
   constructor() {
   este.numeros = Formación(10).llenar(1).mapa((x, i)=>i);
   este.listainvertida = este.numbers.slice().reverse();
    }
   }

3. Iterar sobre la lista invertida usando ngFor:

   <div *ngFor='let elemento de lista invertida; sea ​​i = índice'>
   <pags> Este es un párrafo repetido: {{item}} </pags>
   </div>

Cómo diseñar el primer y el último elemento de manera diferente

Puede diseñar el primer y el último elemento por separado de los otros elementos usando el primero y ultimo Variables angulares. Esta es una alternativa a usando pseudo-clases de CSS me gusta :primer hijo.

1. En la instrucción ngFor, declare la primera y la última variable. Use la directiva ngClass para asignar las clases CSS azul y roja en los pasos anteriores. Asigne la clase CSS azul al primer elemento y la clase CSS roja al último elemento:

   <div *ngFor='dejar artículo de números; let first = primero; dejar que dure = último' [Claseng]= "{azul: primero, rojo: último}">
   <pags> Este es un párrafo repetido: {{item}} </pags>
   </div>

Cómo usar un ngFor para iterar sobre objetos

Puede usar la directiva ngFor para recorrer objetos y acceder a sus variables individuales.

1. Cree una lista de objetos en el archivo TypeScript. En este caso, habrá una lista de personas con sus datos:

   exportar claseEjemploClaseimplementosOnInit{
    gente = []; 
   constructor() {
   este.gente = [
    { primer nombre: 'John', apellido: 'Herrero', ocupación: 'Gerente de Recursos Humanos', fechaInicio: nueva Fecha("2019-02-05") },
    { primer nombre: 'María', apellido: 'Johnson', ocupación: 'Oficial técnico', fechaInicio: nueva Fecha("2016-01-07") },
    { primer nombre: 'William', apellido: 'Marrón', ocupación: 'Oficial de recursos humanos', fechaInicio: nueva Fecha("2018-03-03") },
    ];
    }
   }

2. En el HTML, use el ciclo ngFor para recorrer la lista de personas. Cada persona será accesible mediante el persona variable. Puede utilizar la variable persona para acceder a los atributos de cada persona:

   <div *ngFor='deja persona de gente; sea ​​i = índice'>
   <h2> {{persona.nombre}} {{persona.apellido}} </h2>
   <pags> {{persona.ocupación}} </pags>
   <pags> {{persona.startDate}} </pags>
   </div>

Cómo usar un ngFor anidado para mostrar objetos dentro de otros objetos

Puede usar un bucle for anidado para mostrar objetos dentro de otros objetos.

1. Modificar la lista de personas. Cada persona tendrá una lista de contactos de emergencia. Guarde cada contacto de emergencia como un objeto separado:

   este.gente = [
    {
    primer nombre: 'John',
    apellido: 'Herrero',
    contactos de emergencia: [
    { nombre: 'amanda smith', relación: 'Esposa', teléfono: '0441239876' },
    { nombre: 'barry smith', relación: 'Hijo', teléfono: '0442239876'}
    ]
    },
    {
    primer nombre: 'María',
    apellido: 'Johnson',
    contactos de emergencia: [
    { nombre: 'marca johnson', relación: 'Esposo', teléfono: '0443239876' }
    ]
    },
    ];

2. En el HTML, cree un bucle anidado dentro de su bucle original para recorrer cada contacto de emergencia y mostrar sus detalles:

   <div *ngFor='deja persona de gente; sea ​​i = índice'>
   <h2> {{persona.nombre}} {{persona.apellido}} </h2>
   <div *ngFor='dejar contacto de person.emergencyContacts; sea ​​j = índice'>
   <h5> Contactos de emergencia: </h5>
   <pags> {{nombre de contacto}} </pags>
   <pags> {{persona.relación}} </pags>
   <pags> {{persona.teléfono}} </pags>
   </div>
   <hermano>
   </div>

Bucle usando ngFor en Angular

Puede usar la directiva estructural ngFor para recorrer dinámicamente elementos HTML en su sitio web. Esto le permitirá repetir el mismo bloque para una cantidad de objetos o para una cantidad específica de veces.

También puede usarlo para hacer otros trucos, como omitir todos los números pares o impares o diseñar el primer y el último elemento. También puede usarlo para renderizar dinámicamente muchos objetos dentro de otros objetos.

Hay otras directivas angulares que puede usar para ayudar a que su sitio web sea más dinámico. Estos incluyen ngIf, ngSwitch, ngStyle, ngClass y ngModel.