Pre každý
V LWC je for:each direktíva, ktorá sa používa so značkou šablóny. Vráti položky z daných údajov. Vyžaduje si to dva parametre. Musíme špecifikovať údaje v for:each={data} a for:item=”premenná” berie aktuálnu položku (z iterátora), ktorá je špecifikovaná premennou. The for:index='index_var' ukladá index prvku, ktorý špecifikuje aktuálny index prvku.
Syntax:
Pozrime sa, ako zadať smernicu for:each v LWC (komponent HTML). For:index je voliteľný.
'item_var' for:index= 'index_where' >
'1,0' ?>
2. Vo všetkých príkladoch, o ktorých budeme v tejto príručke diskutovať, bude logika poskytnutá ako kód „js“. Potom zadáme snímku obrazovky, ktorá obsahuje celý kód „js“.
Príklad 1:
Vytvorme zoznam, ktorý obsahuje 10 predmetov v súbore „firstComponent.js“. Použite príkaz for:each template a iterujte tento zoznam pomocou „sub“ iterátora. Zadajte kľúč ako tento iterátor vo vnútri značky odseku a zobrazte predmety.
firstExample.html<šablóna>
'sub' for:index= 'index' >
{sub}
firstExample.js
// Vytvorenie poľa subjects_array, ktoré obsahuje 10 predmetov
subjects_array = [ 'AWS' , 'Salesforce' , 'PHP' , 'Java' , 'Python' , 'HTML' , 'JS' , 'Java' , 'Oracle' , 'C#' ];
Celý kód:
Výkon:
Pridajte tento komponent na stránku „Záznam“ ľubovoľného objektu (pridáme ho na stránku „Záznam“ účtu). Na používateľskom rozhraní sa zobrazí všetkých 10 prvkov.
Príklad 2:
Teraz vytvoríme pole objektov, ktoré je „id“, program a typ s 10 záznamami súvisiacimi s predmetmi. Tieto sa opakujú, aby sa získal program a typ. Kľúčom je „id“ a hodnoty typu sú zobrazené tučným písmom.
secondExample.html<šablóna>
'obj' for:index= 'index' >
{obj.program} - {obj.type}
secondExample.js
// Vytvorenie poľa_objektov, ktoré obsahuje podrobnosti o 10 predmetov
pole_objektov = [{id: 1 ,program: 'AWS' , typ: 'oblak' },{id: 2 ,program: 'Salesforce' , typ: 'oblak' },
{id: 3 ,program: 'PHP' , typ: 'web' },{id: 4 ,program: 'Java' , typ: 'Web/dáta' },
{id: 5 ,program: 'Python' , typ: 'všetky' },{id: 6 ,program: 'HTML' , typ: 'web' },
{id: 7 ,program: 'JS' , typ: 'web' },{id: 8 ,program: '.NET' , typ: 'Web/dáta' },
{id: 9 ,program: 'Oracle' , typ: 'údaje' },{id: 10 ,program: 'C#' , typ: 'údaje' }];
Celý kód:
Výkon:
Môžete vidieť, že všetky programy sú zobrazené v používateľskom rozhraní spolu s ich typmi.
Príklad 3:
Vytvorte vnorené pole objektov (id, program, typ a témy). Tu budú témy opäť obsahovať zoznam prvkov. V prvej direktíve for:each template iterujeme celé vnorené pole. V tejto šablóne znova opakujeme témy pomocou predchádzajúceho iterátora. Ďalej zobrazíme program, typ a témy v hlavnej časti pre: každú šablónu.
thirdComponent.html<šablóna>
'val' for:index= 'index' >
'val1' >
PROGRAM: {val.program} - {val.type} TÉMY: {val.Topics}
thirdComponent.js
údaje = [{id: 1 ,program: 'AWS' , typ: 'oblak' , Témy:[ 'úvod' , 'Základy AWC' ]},
{id: 2 ,program: 'Salesforce' , typ: 'oblak' , Témy:[ 'správca' , 'vývoj' ]},
{id: 3 ,program: 'PHP' , typ: 'web' , Témy:[ 'úvod' , 'PHP-MySQL' ]}];
Celý kód:
Výkon:
Všetky predmety sú zobrazené s ich typom a témami. Každý predmet obsahuje dve témy.
Príklad 4:
Zopakujme záznamy, ktoré sa nachádzajú v objekte „Účet“. Najprv napíšte triedu Apex, ktorá vráti zoznam záznamov (metóda returnAcc()), ktoré obsahujú polia ID účtu, Názov, Odvetvie a Hodnotenie z objektu Štandard účtu. V súbore „js“ vyvoláme metódu returnAcc() z Apexu (prostredníctvom príkazu import) vo vnútri connectcallback(). Tým sa vrátia účty. Nakoniec sú tieto účty špecifikované v direktíve šablóny for:each, aby ste získali názov účtu a odvetvie.
AccountData.apxcpublic with sharing class AccountData {
@AuraEnabled(cacheable=true)
public static List
Zoznam
vrátiť zoznam účtov;
}
}
finalComponent.html
<šablóna>
'account_rec' >
Účet: {account_rec.Name} Odvetvie: {account_rec.Industry}
finalComponent.js
import { LightningElement,track } z 'šťastie' ;
importovať returnAcc z '@salesforce/apex/AccountData.returnAcc' ;
exportovať predvolenú triedu FinalComponent rozširuje LightningElement {
@track účty;
@chyba stopy;
connectCallback(){
returnAcc()
// Vrátiť účty
.potom(výsledok => {
this.accounts = výsledok;
this.error = nedefinované;
})
.catch(error => {
toto.chyba = chyba;
this.accounts = nedefinované;
});
}
}
Výkon:
S poľami Názov a Odvetvie sa zobrazí iba 10 účtov.
Záver
Diskutovali sme o direktíve šablóny for:each, ktorá sa používa na vrátenie položiek z daných údajov. Poskytnuté sú štyri rôzne príklady, ktoré zahŕňajú zoznam, pole objektov, vnorené objekty a objekty Salesforce. Údaje musia pochádzať zo súboru „js“ a použiť ho v šablóne for:each. Uistite sa, že pri nasadzovaní posledných príkladových komponentov musíte najskôr nasadiť triedu Apex.