Pentru fiecare
În LWC, for:each este o directivă care este utilizată cu eticheta șablon. Returnează articolele din datele date. Este nevoie de doi parametri. Trebuie să specificăm datele în pentru:each={date} și for:item='variable' preia elementul curent (din iterator) care este specificat cu o variabilă. The pentru:index='index_var' stochează indexul elementului care specifică indexul elementului curent.
Sintaxă:
Să vedem cum să specificăm directiva for:each în LWC (componenta HTML). For:index este opțional.
'item_var' pentru:index= 'index_where' >
„1.0” ?>
<ținte>
2. În toate exemplele pe care le vom discuta în acest ghid, logica va fi furnizată ca cod „js”. După aceea, specificăm captura de ecran care include întregul cod „js”.
Exemplul 1:
Să creăm o listă care să conțină 10 subiecte în fișierul „firstComponent.js”. Utilizați directiva de șablon for:each și repetați această listă cu iteratorul „sub”. Specificați cheia ca acest iterator în interiorul etichetei de paragraf și afișați subiectele.
firstExample.html<șablon>
'sub' pentru:index= 'index' >
{sub}
firstExample.js
// Creați subjects_array care deține 10 subiecte
matrice_subiecte = [ 'AWS' , 'Forta de vanzare' , 'PHP' , 'Java' , 'Piton' , „HTML” , 'JS' , 'Java' , 'Oracol' , „C#” ];
Întregul cod:
Ieșire:
Adăugați această componentă la pagina „Înregistrare” a oricărui obiect (o adăugăm la pagina „Înregistrare” contului). Toate cele 10 elemente sunt afișate pe interfața de utilizare.
Exemplul 2:
Acum, creăm o matrice de obiecte care este „id”, programul și tipul cu 10 înregistrări legate de Subiecte. Acestea sunt repetate pentru a obține programul și tip. Cheia este „id”, iar valorile tipului sunt afișate cu caractere aldine.
secondExample.html<șablon>
<șablon pentru:each={array_of_objects} pentru:item= 'obj' pentru:index= 'index' >
{obj.program} - {obj.type}
secondExample.js
// Creați un array_of_objects care conține detalii despre 10 subiecte
array_of_objects = [{id: 1 ,program: 'AWS' , tip: 'Nor' },{id: 2 ,program: 'Forta de vanzare' , tip: 'Nor' },
{id: 3 ,program: 'PHP' , tip: 'Web' },{id: 4 ,program: 'Java' , tip: „Web/Date” },
{id: 5 ,program: 'Piton' , tip: 'Toate' },{id: 6 ,program: „HTML” , tip: 'Web' },
{id: 7 ,program: 'JS' , tip: 'Web' },{id: 8 ,program: '.NET' , tip: „Web/Date” },
{id: 9 ,program: 'Oracol' , tip: 'Date' },{id: 10 ,program: „C#” , tip: 'Date' }];
Întregul cod:
Ieșire:
Puteți vedea că toate programele sunt afișate pe interfața de utilizare împreună cu tipurile lor.
Exemplul 3:
Creați o matrice imbricată de obiecte (id, program, tip și subiecte). Aici, subiectele vor conține din nou o listă de elemente. În prima directivă for:each șablon, repetăm întreaga matrice imbricată. În interiorul acestui șablon, repetăm din nou subiectele folosind iteratorul anterior. Apoi, afișăm programul, tipul și subiectele în principal pentru: fiecare șablon.
thirdComponent.html<șablon>
'val' pentru:index= 'index' >
'val1' >
PROGRAM: {val.program} - {val.type} SUBIECTE: {val.Topics}
thirdComponent.js
date = [{id: 1 ,program: 'AWS' , tip: 'Nor' , Subiecte:[ 'Introducere' , „esențiale AWC” ]},
{id: 2 ,program: 'Forta de vanzare' , tip: 'Nor' , Subiecte:[ „Administrator” , 'Dezvoltare' ]},
{id: 3 ,program: 'PHP' , tip: 'Web' , Subiecte:[ 'Introducere' , „PHP-MySQL” ]}];
Întregul cod:
Ieșire:
Toate subiectele sunt afișate cu tipul și subiectele sale. Fiecare subiect conține două subiecte.
Exemplul 4:
Să repetăm înregistrările care sunt prezente în obiectul „Cont”. Mai întâi, scrieți o clasă Apex care returnează lista de înregistrări (returnAcc() – metoda) care includ câmpurile ID cont, Nume, Industrie și Evaluare din obiectul Standard de cont. În fișierul „js”, invocăm metoda returnAcc() de la Apex (prin instrucțiunea de import) în interiorul connectedcallback(). Aceasta returnează conturile. În cele din urmă, aceste conturi sunt specificate în directiva șablon for:each pentru a obține numele contului și industria.
AccountData.apxcpublic cu clasa de partajare AccountData {
@AuraEnabled(cacheable=true)
public static List
List
returnează Listă cont;
}
}
finalComponent.html
<șablon>
'account_rec' >
Cont: {account_rec.Name} Industrie: {account_rec.Industry}
finalComponent.js
importați { LightningElement, track } din 'noroc' ;
import returnAcc de la „@salesforce/apex/AccountData.returnAcc” ;
exportă clasa implicită FinalComponent extinde LightningElement {
@track conturi;
@track error;
conectatCallback(){
returnAcc()
// Returnează conturile
.then(rezultat => {
asta.conturi = rezultat;
this.error = nedefinit;
})
.catch(eroare => {
this.error = eroare;
asta.conturi = nedefinit;
});
}
}
Ieșire:
Doar 10 conturi sunt afișate cu câmpurile Nume și Industrie.
Concluzie
Am discutat despre directiva de șablon for:each care este folosită pentru a returna articolele din datele date. Sunt furnizate patru exemple diferite care includ lista, matricea de obiecte, obiectele imbricate și obiectele Salesforce. Datele trebuie să provină din fișierul „js” și să le folosească în șablonul for:each. Asigurați-vă că trebuie să implementați mai întâi clasa Apex în timp ce implementați ultimele componente de exemplu.