Za svakoga
U LWC-u, for:each je direktiva koja se koristi s oznakom predloška. Vraća stavke iz danih podataka. Potrebna su dva parametra. Moramo navesti podatke u za:svaki={podaci} i za:stavka=”varijabla” uzima trenutnu stavku (iz iteratora) koja je navedena varijablom. The za:index=”index_var” pohranjuje indeks elementa koji specificira trenutni indeks elementa.
Sintaksa:
Pogledajmo kako navesti direktivu for:each u LWC (HTML komponenti). For:index nije obavezan.
'item_var' za:index= 'index_var' >
'1,0' ?>
2. U svim primjerima o kojima ćemo raspravljati u ovom vodiču, logika će biti navedena kao 'js' kod. Nakon toga specificiramo snimku zaslona koja uključuje cijeli 'js' kod.
Primjer 1:
Kreirajmo popis koji sadrži 10 subjekata u datoteci 'firstComponent.js'. Upotrijebite direktivu predloška for:each i iterirajte ovaj popis pomoću iteratora 'sub'. Navedite ključ kao ovaj iterator unutar oznake odlomka i prikažite subjekte.
prviPrimjer.html'pod' za:index= 'indeks' >
{sub}
firstExample.js
// Stvori polje_subjekata koje drži 10 predmeta
niz_subjekata = [ 'AWS' , 'Salesforce' , 'PHP' , 'Java' , 'Piton' , 'HTML' , 'JS' , 'Java' , 'Oracle' , 'C#' ];
Cijeli kod:
Izlaz:
Dodajte ovu komponentu na stranicu 'Zapis' bilo kojeg objekta (mi je dodajemo na stranicu 'Zapis' računa). Svih 10 elemenata prikazano je na korisničkom sučelju.
Primjer 2:
Sada stvaramo niz objekata koji je 'id', program i tip s 10 zapisa koji se odnose na subjekte. Oni se ponavljaju da bi se dobio program i tip. Ključ je 'id', a vrijednosti tipa prikazane su podebljano.
secondExample.html'obj' za:index= 'indeks' >
{obj.program} - {obj.type}
secondExample.js
// Kreiraj array_of_objects koji sadrži pojedinosti o 10 predmeta
niz_objekata = [{id: 1 ,program: 'AWS' , upišite: 'Oblak' },{iskaznica: 2 ,program: 'Salesforce' , upišite: 'Oblak' },
{iskaznica: 3 ,program: 'PHP' , upišite: 'Mreža' },{iskaznica: 4 ,program: 'Java' , upišite: 'Web/Podaci' },
{iskaznica: 5 ,program: 'Piton' , upišite: 'Svi' },{iskaznica: 6 ,program: 'HTML' , upišite: 'Mreža' },
{iskaznica: 7 ,program: 'JS' , upišite: 'Mreža' },{iskaznica: 8 ,program: '.NETO' , upišite: 'Web/Podaci' },
{iskaznica: 9 ,program: 'Oracle' , upišite: 'Podaci' },{iskaznica: 10 ,program: 'C#' , upišite: 'Podaci' }];
Cijeli kod:
Izlaz:
Možete vidjeti da su svi programi prikazani na korisničkom sučelju zajedno s njihovim vrstama.
Primjer 3:
Stvorite ugniježđeni niz objekata (id, program, tip i teme). Ovdje će teme opet sadržavati popis elemenata. U prvoj for:each predložak direktivi, ponavljamo cijeli ugniježđeni niz. Unutar ovog predloška ponovno ponavljamo teme koristeći prethodni iterator. Zatim prikazujemo program, vrstu i teme u glavnom za: svaki predložak.
trećaKomponenta.html'val' za:index= 'indeks' >
'val1' >
PROGRAM: {val.program} - {val.type} TEME: {val.Teme}
trećaKomponenta.js
podaci = [{id: 1 ,program: 'AWS' , upišite: 'Oblak' , Teme:[ 'Uvod' , 'AWC osnovno' ]},
{iskaznica: 2 ,program: 'Salesforce' , upišite: 'Oblak' , Teme:[ 'Administrator' , 'Razvoj' ]},
{iskaznica: 3 ,program: 'PHP' , upišite: 'Mreža' , Teme:[ 'Uvod' , 'PHP-MySQL' ]}];
Cijeli kod:
Izlaz:
Prikazani su svi predmeti s njihovom vrstom i temama. Svaki predmet ima dvije teme.
Primjer 4:
Iterirajmo zapise koji su prisutni u objektu 'Račun'. Prvo napišite Apex klasu koja vraća popis zapisa (returnAcc() – metoda) koji uključuju ID računa, polja Naziv, Industrija i Ocjena iz objekta Standard računa. U datoteci “js” pozivamo metodu returnAcc() iz Apex-a (kroz naredbu import) unutar Connectedcallback(). Ovo vraća račune. Na kraju, ovi računi navedeni su u direktivi predloška for:each da biste dobili naziv računa i industriju.
AccountData.apxcjavno s dijeljenjem klase AccountData {
@AuraEnabled(cacheable=true)
public static List
List
povratak popisa računa;
}
}
finalComponent.html
'account_rec' >
Račun: {account_rec.Name} Djelatnost: {account_rec.Industry}
finalComponent.js
import { LightningElement,track } from 'sreća' ;
import returnAcc iz '@salesforce/apex/AccountData.returnAcc' ;
izvoz zadane klase FinalComponent extends LightningElement {
@track accounts;
@track error;
ConnectedCallback(){
returnAcc()
// Vrati račune
.then(rezultat => {
this.accounts = rezultat;
this.error = nedefinirano;
})
.catch(greška => {
this.error = greška;
this.accounts = nedefinirano;
});
}
}
Izlaz:
Samo 10 računa prikazano je s poljima Naziv i Djelatnost.
Zaključak
Raspravljali smo o direktivi predloška for:each koja se koristi za vraćanje stavki iz danih podataka. Navedena su četiri različita primjera koji uključuju popis, niz objekata, ugniježđene objekte i Salesforce objekte. Podaci moraju dolaziti iz datoteke 'js' i koristiti je u for:each predlošku. Provjerite morate li najprije implementirati klasu Apex dok implementirate posljednje komponente primjera.