Para cada
No LWC, for:each é uma diretiva usada com a tag template. Ele retorna os itens dos dados fornecidos. São necessários dois parâmetros. Temos que especificar os dados no para:cada={dados} e para:item=”variável” pega o item atual (do iterador) que é especificado com uma variável. O para: índice=”índice_var” armazena o índice do elemento que especifica o índice do elemento atual.
Sintaxe:
Vamos ver como especificar a diretiva for:each no LWC (componente HTML). O for:index é opcional.
'1,0' ?>
2. Em todos os exemplos que discutiremos neste guia, a lógica será fornecida como o código “js”. Depois disso, especificamos a captura de tela que inclui todo o código “js”.
Exemplo 1:
Vamos criar uma lista que contém 10 assuntos no arquivo “firstComponent.js”. Use a diretiva de modelo for:each e itere esta lista com o iterador “sub”. Especifique a chave como este iterador dentro da tag de parágrafo e exiba os assuntos.
primeiroExemplo.html{sub}
primeiroExemplo.js
// Cria subject_array que contém 10 assuntos
assuntos_array = [ 'AWS' , 'Força de vendas' , 'PHP' , 'Java' , 'Pitão' , 'HTML' , 'JS' , 'Java' , 'Oráculo' , 'C#' ];
Código inteiro:
Saída:
Adicione este componente à página “Registro” de qualquer objeto (nós o adicionamos à página “Registro” da conta). Todos os 10 elementos são exibidos na IU.
Exemplo 2:
Agora, criamos um array de objetos que é “id”, o programa, e digitamos com 10 registros relacionados aos Assuntos. Eles são iterados para obter o programa e o tipo. A chave é o “id” e os valores do tipo são exibidos em negrito.
segundoExemplo.html{obj.program} - {obj.type}
segundoExemplo.js
// Cria array_of_objects que contém detalhes de 10 assuntos
array_of_objects = [{id: 1 ,programa: 'AWS' , tipo: 'Nuvem' },{eu ia: 2 ,programa: 'Força de vendas' , tipo: 'Nuvem' },
{eu ia: 3 ,programa: 'PHP' , tipo: 'Rede' },{eu ia: 4 ,programa: 'Java' , tipo: 'Web/Dados' },
{eu ia: 5 ,programa: 'Pitão' , tipo: 'Todos' },{eu ia: 6 ,programa: 'HTML' , tipo: 'Rede' },
{eu ia: 7 ,programa: 'JS' , tipo: 'Rede' },{eu ia: 8 ,programa: '.LÍQUIDO' , tipo: 'Web/Dados' },
{eu ia: 9 ,programa: 'Oráculo' , tipo: 'Dados' },{eu ia: 10 ,programa: 'C#' , tipo: 'Dados' }];
Código inteiro:
Saída:
Você pode ver que todos os programas são exibidos na IU junto com seus tipos.
Exemplo 3:
Crie uma matriz aninhada de objetos (id, programa, tipo e tópicos). Aqui, os tópicos conterão novamente uma lista de elementos. Na primeira diretiva de modelo for:each, iteramos todo o array aninhado. Dentro deste modelo, iteramos os tópicos novamente usando o iterador anterior. A seguir, exibimos o programa, o tipo e os tópicos no modelo principal for:each.
terceiroComponent.htmlPROGRAMA: {val.program} - {val.type} TÓPICOS: {val.Tópicos}
terceiroComponent.js
dados = [{id: 1 ,programa: 'AWS' , tipo: 'Nuvem' , Tópicos:[ 'Introdução' , 'Fundamentos do AWC' ]},
{eu ia: 2 ,programa: 'Força de vendas' , tipo: 'Nuvem' , Tópicos:[ 'Administrador' , 'Desenvolvimento' ]},
{eu ia: 3 ,programa: 'PHP' , tipo: 'Rede' , Tópicos:[ 'Introdução' , 'PHP-MySQL' ]}];
Código inteiro:
Saída:
Todos os assuntos são exibidos com seu tipo e tópicos. Cada disciplina contém dois tópicos.
Exemplo 4:
Vamos iterar os registros que estão presentes no objeto “Conta”. Primeiro, escreva uma classe Apex que retorne a lista de registros (método returnAcc()) que inclui os campos ID da conta, Nome, Setor e Classificação do objeto Padrão da conta. No arquivo “js”, invocamos o método returnAcc() do Apex (por meio da instrução import) dentro deconnectedcallback(). Isso retorna as contas. Finalmente, essas contas são especificadas na diretiva de modelo for:each para obter o nome da conta e o setor.
Dadosdaconta.apxcpublic com classe de compartilhamento AccountData {
@AuraEnabled(cacheable=true)
public static List
List
return listadecontas;
}
}
finalComponent.html
Conta: {account_rec.Name} Setor: {account_rec.Industry}
