Vix Blog
No Result
View All Result
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA
NEWSLETTER
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA
No Result
View All Result
Vix Blog
No Result
View All Result

Como usar a diretiva angular ngFor

Carolina by Carolina
17 de junho de 2022
Reading Time: 14 mins read
0
Como usar a diretiva angular ngFor

RELATED POSTS

O que são as tecnologias Adaptive Boost e Thermal Velocity Boost da Intel?

6 das coisas mais irritantes sobre Tesla EVs

As melhores teclas de teclado

Descubra tudo o que você precisa saber sobre essa diretiva poderosa e como ela facilita muito o trabalho com sequências.

Vista por trás de alguém sentado em um computador, com a tela totalmente visível, exibindo o código-fonte.

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 percorra uma matriz de objetos para exibir seus detalhes. É uma ferramenta poderosa que você pode usar até mesmo 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 uma matriz 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='let item of [0, 1, 2, 3, 4]; let i = index'>
    <p> This is a repeated paragraph: {{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:
    export class ExampleClass implements OnInit {
    numbers: Array<number> = [];
    constructor() {
    this.numbers = Array(10).fill(1).map((x,i)=>i);
    }
    }
  3. Você pode então percorrer a matriz de números no HTML:
    <div *ngFor='let item of numbers; let i = index'>
    <p>This is a repeated paragraph: {{item}}</p>
    </div>
    Saída de loop for loop através de números estáticos


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 isso pode ser útil é se você deseja 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:
    .red {
    color: red;
    }
    .blue {
    color: blue;
    }
  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='let item of numbers; let odd = odd; let even = even' [ngClass]="{red: even, blue: odd}">
    <p> This is a repeated paragraph: {{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:
    Parágrafos HTML com ímpar de cor azul e até com cor vermelha

  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='let item of numbers; let even = even'>
    <p *ngIf='even'> This is a repeated paragraph: {{item}} </p>
    </div>
    Apenas elementos HTML uniformes


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 da matriz e deduza o número de itens que você já percorreu:
    <div *ngFor="let item of numbers; let i = index;">
    <p> This is a repeated paragraph: {{numbers.length-i-1}} </p>
    </div>
  2. Você também pode criar uma lista invertida no arquivo TypeScript:
    export class ExampleClass implements OnInit {
    numbers: Array<number> = [];
    reversedList: Array<number> = [];
    constructor() {
    this.numbers = Array(10).fill(1).map((x,i)=>i);
    this.reversedList = this.numbers.slice().reverse();
    }
    }
  3. Itere sobre a lista invertida usando o ngFor:
    <div *ngFor='let item of reversedList; let i = index'>
    <p> This is a repeated paragraph: {{item}} </p>
    </div>
    Lista de elementos HTML ao contrário


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 ao uso de pseudoclasses CSS como :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='let item of numbers; let first = first; let last = last' [ngClass]= "{blue: first, red: last}"> 
    <p> This is a repeated paragraph: {{item}} </p>
    </div>
    Lista de primeiro e último

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:
    export class ExampleClass implements OnInit {
    people = [];
    constructor() {
    this.people = [
    { firstName: 'John', lastName: 'Smith', occupation: 'HR Manager', startDate: new Date("2019-02-05") },
    { firstName: 'Mary', lastName: 'Johnson', occupation: 'Technical Officer', startDate: new Date("2016-01-07") },
    { firstName: 'William', lastName: 'Brown', occupation: 'HR Officer', startDate: new Date("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='let person of people; let i = index'>
    <h2> {{person.firstName}} {{person.lastName}} </h2>
    <p> {{person.occupation}} </p>
    <p> {{person.startDate}} </p>
    </div>
    Site exibindo detalhes de várias pessoas


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:
    this.people = [
    {
    firstName: 'John',
    lastName: 'Smith',
    emergencyContacts: [
    { name: 'Amanda Smith', relationship: 'Wife', phone: '0441239876' },
    { name: 'Barry Smith', relationship: 'Son', phone: '0442239876'}
    ]
    },
    {
    firstName: 'Mary',
    lastName: 'Johnson',
    emergencyContacts: [
    { name: 'Mark Johnson', relationship: 'Husband', phone: '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='let person of people; let i = index'>
    <h2> {{person.firstName}} {{person.lastName}} </h2>
    <div *ngFor='let contact of person.emergencyContacts; let j = index'>
    <h5> Emergency Contacts: </h5>
    <p> {{contact.name}} </p>
    <p> {{person.relationship}} </p>
    <p> {{person.phone}} </p>
    </div>
    <br>
    </div>
    Site listando os detalhes das pessoas e seus contatos de emergência


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.

Carolina

Carolina

Related Posts

O que são E-Cores e P-Cores?
Entretenimento

O que são as tecnologias Adaptive Boost e Thermal Velocity Boost da Intel?

1 de fevereiro de 2023
6 das coisas mais irritantes sobre Tesla EVs
Entretenimento

6 das coisas mais irritantes sobre Tesla EVs

1 de fevereiro de 2023
As melhores teclas de teclado
Entretenimento

As melhores teclas de teclado

1 de fevereiro de 2023
Honor deve lançar dois novos aparelhos no MWC ’23
Entretenimento

Honor deve lançar dois novos aparelhos no MWC ’23

1 de fevereiro de 2023
Porquê reiniciar seu roteador da maneira correta
Entretenimento

Porquê reiniciar seu roteador da maneira correta

1 de fevereiro de 2023
Os 8 melhores sites para decrescer plug-ins e instrumentos VST gratuitos
Entretenimento

Os 8 melhores sites para decrescer plug-ins e instrumentos VST gratuitos

1 de fevereiro de 2023
Next Post
Economize muito no Windows 10 ou 11 e nas licenças originais do Office

Economize muito no Windows 10 ou 11 e nas licenças originais do Office

O que é phishing clone?

O que é phishing clone?

Deixe um comentário Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

No Result
View All Result

Últimas Notícias

O que são E-Cores e P-Cores?

O que são as tecnologias Adaptive Boost e Thermal Velocity Boost da Intel?

1 de fevereiro de 2023
7 razões genuinamente boas para comprar um rastreador de fitness

7 razões genuinamente boas para comprar um rastreador de fitness

1 de fevereiro de 2023
6 das coisas mais irritantes sobre Tesla EVs

6 das coisas mais irritantes sobre Tesla EVs

1 de fevereiro de 2023
Entendendo a legado de padrão no Django

Porquê usar variáveis ​​CSS porquê um profissional

1 de fevereiro de 2023
Uma vez que acessar sistemas de arquivos remotos a partir do terminal Linux com Termscp

Porquê integrar o serviço de autenticação Auth0 com um aplicativo React

1 de fevereiro de 2023

Categorias

  • Entretenimento
  • Mundo
  • Notícias
  • Segurança
Vix Blog

Somos entusiastas da tecnologia com a missão de ensinar ao mundo como usar e compreender a tecnologia em suas vidas.
SAIBA MAIS »

Entre em contato conosco enviando um e-mail para contato@vixblog.com

Posts recentes

  • O que são as tecnologias Adaptive Boost e Thermal Velocity Boost da Intel?
  • 7 razões genuinamente boas para comprar um rastreador de fitness
  • 6 das coisas mais irritantes sobre Tesla EVs

Categorias

  • Entretenimento
  • Mundo
  • Notícias
  • Segurança

Links Importantes

  • Quem Somos
  • Blog
  • Fale Conosco
  • Política de Privacidade
  • DMCA

© 2021 VixBlog - Notícias e dicas para o seu dia dia.

No Result
View All Result
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA

© 2021 VixBlog - Notícias e dicas para o seu dia dia.