Per ciascuno
In LWC, for:each è una direttiva utilizzata con il tag template. Restituisce gli elementi dai dati forniti. Richiede due parametri. Dobbiamo specificare i dati nel file per:ciascuno={dati} E for:articolo='variabile' prende l'elemento corrente (dall'iteratore) specificato con una variabile. IL for:index='var_indice' memorizza l'indice dell'elemento che specifica l'indice dell'elemento corrente.
Sintassi:
Vediamo come specificare la direttiva for:each nel LWC (Componente HTML). Il for:index è facoltativo.
'var_oggetto' per:indice= 'var_indice' >
'1.0' ?>
2. In tutti gli esempi di cui parleremo in questa guida, la logica verrà fornita come codice “js”. Successivamente, specifichiamo la schermata che include l'intero codice 'js'.
Esempio 1:
Creiamo un elenco che contenga 10 argomenti nel file 'firstComponent.js'. Utilizza la direttiva for:each template e ripeti questo elenco con l'iteratore 'sub'. Specifica la chiave come iteratore all'interno del tag del paragrafo e visualizza gli argomenti.
primoEsempio.html'sub' per:indice= 'indice' >
{sub}
primoEsempio.js
// Crea topics_array che contenga 10 soggetti
array_soggetti = [ 'AWS' , 'Forza vendite' , 'PHP' , 'Giava' , 'Pitone' , 'HTML' , 'JS' , 'Giava' , 'Oracolo' , 'C#' ];
Intero codice:
Produzione:
Aggiungi questo componente alla pagina 'Registra' di qualsiasi oggetto (lo aggiungiamo alla pagina 'Registra' dell'account). Tutti i 10 elementi vengono visualizzati sull'interfaccia utente.
Esempio 2:
Ora creiamo un array di oggetti che è 'id', il programma, e digitiamo con 10 record relativi agli Oggetti. Questi vengono ripetuti per ottenere il programma e il tipo. La chiave è 'id' e i valori del tipo vengono visualizzati in grassetto.
secondoEsempio.html'oggetto' per:indice= 'indice' >
{obj.programma} - {obj.type}
secondo Esempio.js
// Crea array_of_objects che contiene i dettagli di 10 soggetti
array_di_oggetti = [{id: 1 ,programma: 'AWS' , tipo: 'Nuvola' },{id: 2 ,programma: 'Forza vendite' , tipo: 'Nuvola' },
{id: 3 ,programma: 'PHP' , tipo: 'Ragnatela' },{id: 4 ,programma: 'Giava' , tipo: 'Web/Dati' },
{id: 5 ,programma: 'Pitone' , tipo: 'Tutto' },{id: 6 ,programma: 'HTML' , tipo: 'Ragnatela' },
{id: 7 ,programma: 'JS' , tipo: 'Ragnatela' },{id: 8 ,programma: '.NETTO' , tipo: 'Web/Dati' },
{id: 9 ,programma: 'Oracolo' , tipo: 'Dati' },{id: 10 ,programma: 'C#' , tipo: 'Dati' }];
Intero codice:
Produzione:
Puoi vedere che tutti i programmi vengono visualizzati sull'interfaccia utente insieme ai loro tipi.
Esempio 3:
Crea un array nidificato di oggetti (id, programma, tipo e argomenti). Anche in questo caso gli argomenti conterranno un elenco di elementi. Nella prima direttiva for:each template, iteriamo l'intero array annidato. All'interno di questo modello, iteriamo nuovamente gli argomenti utilizzando l'iteratore precedente. Successivamente, visualizziamo il programma, il tipo e gli argomenti nel menu principale per: ciascun modello.
terzoComponente.html'val' per:indice= 'indice' >
'val1' >
PROGRAMMA: {val.program} - {val.type} ARGOMENTI: {val.Argomenti
terzoComponente.js
dati = [{id: 1 ,programma: 'AWS' , tipo: 'Nuvola' , Temi:[ 'Introduzione' , 'Elementi essenziali per l'AWC' ]},
{id: 2 ,programma: 'Forza vendite' , tipo: 'Nuvola' , Temi:[ 'Amministratore' , 'Sviluppo' ]},
{id: 3 ,programma: 'PHP' , tipo: 'Ragnatela' , Temi:[ 'Introduzione' , 'PHP-MySQL' ]}];
Intero codice:
Produzione:
Tutti gli argomenti vengono visualizzati con la relativa tipologia e argomenti. Ogni soggetto contiene due argomenti.
Esempio 4:
Iteriamo i record presenti nell'oggetto “Account”. Innanzitutto, scrivi una classe Apex che restituisca l'elenco di record (metodo returnAcc()) che includono i campi ID account, Nome, Settore e Valutazione dall'oggetto Account Standard. Nel file “js”, invochiamo il metodo returnAcc() da Apex (tramite l'istruzione import) all'interno diconnectedcallback(). Questo restituisce i conti. Infine, questi account vengono specificati nella direttiva del modello for:each per ottenere il nome dell'account e il settore.
AccountData.apxcpubblico con classe di condivisione AccountData {
@AuraEnabled(cacheable=true)
elenco statico pubblico
Elenco
restituire l'elencoaccount;
}
}
finalComponent.html
'account_rec' >
Account: {account_rec.Name} Settore: {account_rec.Industry
