Katram
LWC for:each ir direktīva, kas tiek izmantota ar veidnes tagu. Tas atgriež vienumus no dotajiem datiem. Tam nepieciešami divi parametri. Mums ir jānorāda dati for:each={data} un for:item=”mainīgs” ņem pašreizējo vienumu (no iteratora), kas norādīts ar mainīgo. The for:index=”index_var” saglabā elementu indeksu, kas norāda pašreizējo elementu indeksu.
Sintakse:
Apskatīsim, kā norādīt for:each direktīvu LWC (HTML komponentā). For:indekss nav obligāts.
'item_var' for:index= 'index_var' >
'1.0' ?>
2. Visos piemēros, par kuriem mēs runāsim šajā rokasgrāmatā, loģika tiks sniegta kā “js” kods. Pēc tam mēs norādām ekrānuzņēmumu, kas ietver visu “js” kodu.
1. piemērs:
Izveidosim sarakstu, kurā ir 10 priekšmeti failā “firstComponent.js”. Izmantojiet for:each template direktīvu un atkārtojiet šo sarakstu ar 'apakš' iteratoru. Norādiet atslēgu kā šo iteratoru rindkopas taga iekšpusē un parādiet tēmas.
pirmaisPiemērs.html'apakš' for:index= 'indekss' >
{sub}
pirmaisPiemērs.js
// Izveidojiet subjektu_masīvu, kas satur 10 priekšmetiem
subjekti_masīvs = [ 'AWS' , 'Salesforce' , 'PHP' , 'Java' , 'Pitons' , 'HTML' , 'JS' , 'Java' , 'Orākuls' , 'C#' ];
Viss kods:
Izvade:
Pievienojiet šo komponentu jebkura objekta lapai “Ierakstīt” (mēs to pievienojam konta lapai “Ierakstīt”). UI tiek parādīti visi 10 elementi.
2. piemērs:
Tagad mēs izveidojam objektu masīvu, kas ir “id”, programma un ierakstām 10 ierakstus, kas saistīti ar priekšmetiem. Tie tiek atkārtoti, lai iegūtu programmu un veidu. Galvenais ir “id”, un veida vērtības tiek parādītas treknrakstā.
secondExample.html'obj' for:index= 'indekss' >
{obj.program} — {obj.type}
secondExample.js
// Izveidojiet masīvu_of_objects, kurā ir informācija par 10 priekšmetiem
array_of_objects = [{id: 1 , programma: 'AWS' , ierakstiet: 'mākonis' },{id: 2 , programma: 'Salesforce' , ierakstiet: 'mākonis' },
{id: 3 , programma: 'PHP' , ierakstiet: 'Tīmeklis' },{id: 4 , programma: 'Java' , ierakstiet: 'Tīmeklis/dati' },
{id: 5 , programma: 'Pitons' , ierakstiet: 'Visi' },{id: 6 , programma: 'HTML' , ierakstiet: 'Tīmeklis' },
{id: 7 , programma: 'JS' , ierakstiet: 'Tīmeklis' },{id: 8 , programma: '.TĪKLS' , ierakstiet: 'Tīmeklis/dati' },
{id: 9 , programma: 'Orākuls' , ierakstiet: 'Dati' },{id: 10 , programma: 'C#' , ierakstiet: 'Dati' }];
Viss kods:
Izvade:
Varat redzēt, ka visas programmas kopā ar to veidiem tiek parādītas lietotāja saskarnē.
3. piemērs:
Izveidojiet ligzdotu objektu masīvu (ID, programma, veids un tēmas). Šeit tēmās atkal būs elementu saraksts. Pirmajā for:each template direktīvā mēs atkārtojam visu ligzdoto masīvu. Šajā veidnē mēs atkārtojam tēmas vēlreiz, izmantojot iepriekšējo iteratoru. Tālāk mēs parādām programmu, veidu un tēmas galvenajā for:each veidnē.
thirdComponent.html'val' for:index= 'indekss' >
'val1' >
PROGRAMMA: {val.program} - {val.type} TEMATS: {val.Tēmas}
thirdComponent.js
dati = [{id: 1 , programma: 'AWS' , ierakstiet: 'mākonis' , Tēmas:[ 'Ievads' , 'AWC pamatlietas' ]},
{id: 2 , programma: 'Salesforce' , ierakstiet: 'mākonis' , Tēmas:[ 'Administrators' , 'Attīstība' ]},
{id: 3 , programma: 'PHP' , ierakstiet: 'Tīmeklis' , Tēmas:[ 'Ievads' , 'PHP-MySQL' ]}];
Viss kods:
Izvade:
Visi priekšmeti tiek parādīti ar to veidu un tēmām. Katrā priekšmetā ir divas tēmas.
4. piemērs:
Atkārtosim ierakstus, kas atrodas objektā “Konts”. Vispirms uzrakstiet Apex klasi, kas atgriež ierakstu sarakstu (returnAcc() — metode), kas ietver laukus Konta ID, Nosaukums, Nozare un Reitings no konta standarta objekta. Failā “js” mēs izsaucam returnAcc() metodi no Apex (izmantojot importēšanas paziņojumu), kas atrodas savienotā atzvanīšanas (). Tas atgriež kontus. Visbeidzot, šie konti ir norādīti for:each veidnes direktīvā, lai iegūtu konta nosaukumu un nozari.
AccountData.apxcpublisks ar koplietošanas klasi AccountData {
@AuraEnabled(kešatmiņā saglabājama=true)
public static List
Saraksts
atgriezt kontuList;
}
}
finalComponent.html
'account_rec' >
Konts: {account_rec.Name} Nozare: {account_rec.Industry}
finalComponent.js
importēt { LightningElement,track } no 'veiksme' ;
importēt returnAcc no '@salesforce/apex/AccountData.returnAcc' ;
eksportēt noklusējuma klasi FinalComponent paplašina LightningElement {
@track konti;
@track kļūda;
ConnectedCallback(){
returnAcc()
// Atgriezt kontus
.then(rezultāts => {
this.accounts = rezultāts;
this.error = undefined;
})
.catch(error => {
this.error = kļūda;
this.accounts = undefined;
});
}
}
Izvade:
Tiek parādīti tikai 10 konti ar laukiem Nosaukums un Nozare.
Secinājums
Mēs apspriedām for:each template direktīvu, kas tiek izmantota, lai atgrieztu vienumus no dotajiem datiem. Ir sniegti četri dažādi piemēri, kas ietver sarakstu, objektu masīvu, ligzdotos objektus un Salesforce objektus. Datiem ir jānāk no faila “js” un tie jāizmanto for:each veidnē. Pārliecinieties, ka vispirms ir jāizvieto Apex klase, vienlaikus izvietojot pēdējos parauga komponentus.