Como usar a diretiva angular ngFor

Angular usa diretivas para renderizar dinamicamente certos elementos HTML em seu site. Uma das diretivas estruturais que você pode usar é ngFor.

A diretiva ngFor permite que você repita o mesmo bloco um número especificado de vezes ou faça um loop por uma matriz de objetos para exibir seus detalhes. É uma ferramenta poderosa que você pode usar até para renderizar objetos dentro de outros objetos.

Ele também tem muitas funções que podem ser úteis em cenários específicos. Isso inclui encontrar o primeiro e o último elemento ou pular certos itens.

Como usar ngFor para percorrer números estáticos

A diretiva ngFor é baseada no loop for, um dos muitos loops úteis que o JavaScript suporta. A partir da versão atual do Angular (14), você precisará criar um array que tenha o número de itens que deseja percorrer.

1. Você pode criar uma lista dentro da própria instrução ngFor. O código a seguir repetirá um parágrafo cinco vezes, usando índices de 0 a 4:

   <div *ngFor='deixe o item de [0, 1, 2, 3, 4]; deixe i = índice'>
   <p> Este é um parágrafo repetido: {{item}} </p>
   </div>

2. Como o método acima pode não ser adequado para matrizes grandes, você também pode criar dinamicamente uma matriz no arquivo TypeScript:

   exportar classeClasse de ExemploimplementaOnInit{
    números: matriz<número> = [];
   construtor() {
   // Isso criará dinamicamente o seguinte array:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   isto.números = Variedade(10).encher(1).map((x, i)=>i);
    }
   }

3. Você pode então percorrer a matriz de números no HTML:

   <div *ngFor='deixe item de números; deixe i = índice'>
   <p>Este é um parágrafo repetido: {{item}}</p>
   </div>

Como pular ou estilizar certos números

Você pode usar o ímpar ou até ngPara variáveis ​​para determinar cada segundo número. Um cenário em que você pode achar isso útil é se quiser estilizar cada linha ímpar ou par em uma tabela usando uma cor diferente.

1. No arquivo CSS de um componente, adicione algumas novas classes CSS. Estes são os estilos que você usará para certos elementos em índices pares ou ímpares:

   .vermelho {
    cor vermelha;
   }
   .azul { 
    cor azul; 
   }
   

2. Declare variáveis ​​ímpares e pares dentro da instrução ngFor. Essas são variáveis ​​que o Angular reconhecerá. Atribua a classe CSS vermelha a números pares e a classe CSS azul a números ímpares:

   <div *ngFor='deixe item de números; deixe ímpar = ímpar; deixe par = par' [ngClass]="{vermelho: par, azul: ímpar}">
   <p> Este é um parágrafo repetido: {{item}} </p>
   </div>

3. Execute seu site Angular usando ng servir e abra-o no navegador da web. Elementos HTML pares e ímpares alternarão entre os diferentes estilos com base em sua classe CSS:
4. Se você quiser pular completamente todos os números pares, você pode usar a diretiva ngIf. Isso ignorará todos os números ímpares e exibirá apenas os números pares:

   <div *ngFor='deixe item de números; deixe par = par'>
   <p *ngSe='até'> Este é um parágrafo repetido: {{item}} </p>
   </div>

Como contar para trás

Para contar para trás, você pode usar métodos tradicionais, como reverter uma lista ou contar para trás no loop usando um índice.

1. Declare uma variável de índice na instrução ngFor. Dentro do ngFor, comece pelo comprimento do array e deduza o número de itens que você já percorreu:

   <div *ngFor="deixe item de números; seja i = índice;">
   <p> Este é um parágrafo repetido: {{numbers.length-i-1}} </p>
   </div>

2. Você também pode criar uma lista invertida no arquivo TypeScript:

   exportar classeClasse de ExemploimplementaOnInit{
    números: matriz<número> = [];
    reversedList: Array<número> = [];
   construtor() {
   isto.números = Variedade(10).encher(1).map((x, i)=>i);
   isto.reversedList = isto.numbers.slice().reverse();
    }
   }

3. Itere sobre a lista invertida usando o ngFor:

   <div *ngFor='deixe item de reversedList; deixe i = índice'>
   <p> Este é um parágrafo repetido: {{item}} </p>
   </div>

Como estilizar o primeiro e o último elemento de maneira diferente

Você pode estilizar o primeiro e o último elementos separadamente dos outros elementos usando o primeiro e último Variáveis ​​angulares. Esta é uma alternativa para usando pseudoclasses CSS Curti :primeiro filho.

1. Na instrução ngFor, declare a primeira e a última variáveis. Use a diretiva ngClass para atribuir as classes CSS azul e vermelha nas etapas anteriores. Atribua a classe CSS azul ao primeiro elemento e a classe CSS vermelha ao último elemento:

   <div *ngFor='deixe item de números; deixe primeiro = primeiro; deixe durar = último' [ngClass]= "{azul: primeiro, vermelho: último}">
   <p> Este é um parágrafo repetido: {{item}} </p>
   </div>

Como usar um ngFor para iterar sobre objetos

Você pode usar a diretiva ngFor para percorrer objetos e acessar suas variáveis ​​individuais.

1. Crie uma lista de objetos no arquivo TypeScript. Nesse caso, haverá uma lista de pessoas com seus dados:

   exportar classeClasse de ExemploimplementaOnInit{
    pessoas = []; 
   construtor() {
   isto.pessoas = [
    { primeiro nome: 'John', sobrenome: 'Smith', ocupação: 'Gestor de RH', data de início: nova data("2019-02-05") },
    { primeiro nome: 'Mary', sobrenome: 'Johnson', ocupação: 'Oficial técnico', data de início: nova data("2016-01-07") },
    { primeiro nome: 'William', sobrenome: 'Marrom', ocupação: 'Diretor de RH', data de início: nova data("2018-03-03") },
    ];
    }
   }

2. No HTML, use o loop ngFor para percorrer a lista de pessoas. Cada pessoa será acessível usando o pessoa variável. Você pode usar a variável person para acessar os atributos de cada pessoa:

   <div *ngFor='deixe pessoa de pessoas; deixe i = índice'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <p> {{pessoa.ocupação}} </p>
   <p> {{person.startDate}} </p>
   </div>

Como usar um ngFor aninhado para exibir objetos dentro de outros objetos

Você pode usar um loop for aninhado para exibir objetos dentro de outros objetos.

1. Modifique a lista de pessoas. Cada pessoa terá uma lista de contatos de emergência. Armazene cada contato de emergência como um objeto separado:

   isto.pessoas = [
    {
    primeiro nome: 'John',
    sobrenome: 'Smith',
    Contatos de emergência: [
    { nome: 'Amanda Smith', relação: 'Esposa', telefone: '0441239876' },
    { nome: 'Barry Smith', relação: 'Filho', telefone: '0442239876'}
    ]
    },
    {
    primeiro nome: 'Mary',
    sobrenome: 'Johnson',
    Contatos de emergência: [
    { nome: 'Mark Johnson', relação: 'Esposo', telefone: '0443239876' }
    ]
    },
    ];

2. No HTML, crie um loop aninhado dentro do loop original para percorrer cada contato de emergência e exibir seus detalhes:

   <div *ngFor='deixe pessoa de pessoas; deixe i = índice'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='deixe o contato de person.emergencyContacts; deixe j = índice'>
   <h5> Contatos de emergência: </h5>
   <p> {{nome de contato}} </p>
   <p> {{pessoa.relacionamento}} </p>
   <p> {{person.phone}} </p>
   </div>
   <br>
   </div>

Looping usando ngFor em Angular

Você pode usar a diretiva estrutural ngFor para percorrer dinamicamente os elementos HTML em seu site. Isso permitirá que você repita o mesmo bloco para vários objetos ou por um número especificado de vezes.

Você também pode usá-lo para fazer outros truques, como pular todos os números pares ou ímpares ou estilizar o primeiro e o último elemento. Você também pode usá-lo para renderizar dinamicamente muitos objetos dentro de outros objetos.

Existem outras diretivas Angular que você pode usar para ajudar a tornar seu site mais dinâmico. Estes incluem ngIf, ngSwitch, ngStyle, ngClass e ngModel.