Za vsakogar
V LWC je for:each direktiva, ki se uporablja z oznako predloge. Vrne elemente iz danih podatkov. Zahteva dva parametra. Podatke moramo navesti v za:vsak={podatki} in for:item=”spremenljivka” vzame trenutni element (iz iteratorja), ki je določen s spremenljivko. The for:index=”index_var” shrani indeks elementa, ki podaja trenutni indeks elementa.
Sintaksa:
Poglejmo, kako določiti direktivo for:each v LWC (komponenta HTML). For:index ni obvezen.
'item_var' za:index= 'index_var' >
'1,0' ?>
2. V vseh primerih, o katerih bomo razpravljali v tem priročniku, bo logika podana kot koda »js«. Po tem določimo posnetek zaslona, ki vključuje celotno kodo »js«.
Primer 1:
Ustvarimo seznam, ki vsebuje 10 predmetov v datoteki »firstComponent.js«. Uporabite direktivo predloge for:each in ponovite ta seznam z iteratorjem »sub«. Podajte ključ kot ta iterator znotraj oznake odstavka in prikažite zadeve.
firstExample.html'pod' za:index= 'indeks' >
{sub}
firstExample.js
// Ustvari polje subjects_array, ki drži 10 predmetov
niz_predmetov = [ 'AWS' , 'Prodajno silo' , 'PHP' , 'Java' , 'Python' , 'HTML' , 'JS' , 'Java' , 'Oracle' , 'C#' ];
Celotna koda:
Izhod:
Dodajte to komponento na stran »Zapis« katerega koli predmeta (dodamo jo na stran »Zapis« računa). Vseh 10 elementov je prikazanih v uporabniškem vmesniku.
Primer 2:
Zdaj ustvarimo matriko objektov, ki je »id«, program in tip z 10 zapisi, povezanimi s subjekti. Ti se ponovijo, da dobijo program in tip. Ključ je »id«, vrednosti vrste pa so prikazane krepko.
secondExample.html'obj' za:index= 'indeks' >
{obj.program} - {obj.type}
secondExample.js
// Ustvari array_of_objects, ki vsebuje podrobnosti o 10 predmetov
niz_predmetov = [{id: 1 ,program: 'AWS' , tip: 'Oblak' },{id: 2 ,program: 'Prodajno silo' , tip: 'Oblak' },
{id: 3 ,program: 'PHP' , tip: 'Splet' },{id: 4 ,program: 'Java' , tip: 'Splet/podatki' },
{id: 5 ,program: 'Python' , tip: 'vse' },{id: 6 ,program: 'HTML' , tip: 'Splet' },
{id: 7 ,program: 'JS' , tip: 'Splet' },{id: 8 ,program: '.MREŽA' , tip: 'Splet/podatki' },
{id: 9 ,program: 'Oracle' , tip: 'Podatki' },{id: 10 ,program: 'C#' , tip: 'Podatki' }];
Celotna koda:
Izhod:
Vidite lahko, da so vsi programi prikazani v uporabniškem vmesniku skupaj z njihovimi vrstami.
Primer 3:
Ustvarite ugnezdeno matriko predmetov (id, program, tip in teme). Tukaj bodo teme spet vsebovale seznam elementov. V prvi direktivi predloge for:each ponovimo celotno ugnezdeno matriko. Znotraj te predloge ponovno ponovimo teme s prejšnjim iteratorjem. Nato prikažemo program, vrsto in teme v predlogi main for:each.
thirdComponent.html'val' za:index= 'indeks' >
'val1' >
PROGRAM: {val.program} - {val.type} TEME: {val.Teme}
thirdComponent.js
podatki = [{id: 1 ,program: 'AWS' , tip: 'Oblak' , Teme:[ 'Uvod' , 'Osnove AWC' ]},
{id: 2 ,program: 'Prodajno silo' , tip: 'Oblak' , Teme:[ 'Admin' , 'Razvoj' ]},
{id: 3 ,program: 'PHP' , tip: 'Splet' , Teme:[ 'Uvod' , 'PHP-MySQL' ]}];
Celotna koda:
Izhod:
Vsi predmeti so prikazani z njihovo vrsto in temami. Vsak predmet ima dve temi.
Primer 4:
Ponavljajmo zapise, ki so prisotni v objektu »Račun«. Najprej napišite razred Apex, ki vrne seznam zapisov (returnAcc() – metoda), ki vključujejo polja ID računa, Ime, Panoga in Ocena iz objekta Standard računa. V datoteki »js« prikličemo metodo returnAcc() iz Apexa (prek stavka uvoza) znotrajconnectedcallback(). To vrne račune. Končno so ti računi določeni v predlogi for:each, da dobite ime računa in panogo.
AccountData.apxcpublic with sharing class AccountData {
@AuraEnabled(cacheable=true)
public static List
List
vrni seznam računov;
}
}
finalComponent.html
'account_rec' >
Račun: {account_rec.Name} Panoga: {account_rec.Industry}
finalComponent.js
uvoz { LightningElement, track } iz 'sreča' ;
uvozi returnAcc iz '@salesforce/apex/AccountData.returnAcc' ;
izvozni privzeti razred FinalComponent extends LightningElement {
@track računi;
napaka @track;
connectedCallback(){
returnAcc()
// Vrnite račune
.then(rezultat => {
this.accounts = rezultat;
this.error = nedefinirano;
})
.catch(napaka => {
this.error = napaka;
this.accounts = nedefinirano;
});
}
}
Izhod:
Samo 10 računov je prikazanih s polji Ime in Panoga.
Zaključek
Razpravljali smo o direktivi predloge for:each, ki se uporablja za vrnitev elementov iz danih podatkov. Na voljo so štirje različni primeri, ki vključujejo seznam, matriko predmetov, ugnezdene predmete in predmete Salesforce. Podatki morajo izhajati iz datoteke »js« in jo uporabiti v predlogi for:each. Prepričajte se, da morate med uvajanjem zadnjih vzorčnih komponent najprej razmestiti razred Apex.