Jokaiselle
LWC:ssä for:each on ohje, jota käytetään mallitunnisteen kanssa. Se palauttaa kohteet annetuista tiedoista. Se vaatii kaksi parametria. Meidän on määritettävä tiedot for:each={data} ja for:item=”muuttuja” ottaa nykyisen kohteen (iteraattorista), joka on määritetty muuttujalla. The for:index=”index_var” tallentaa elementtiindeksin, joka määrittää nykyisen elementtiindeksin.
Syntaksi:
Katsotaanpa, kuinka for:each-direktiivi määritellään LWC:ssä (HTML-komponentti). for:index on valinnainen.
'item_var' for:index= 'index_var' >
'1.0' ?>
2. Kaikissa esimerkeissä, joista aiomme keskustella tässä oppaassa, logiikka tarjotaan 'js'-koodina. Sen jälkeen määritämme kuvakaappauksen, joka sisältää koko 'js'-koodin.
Esimerkki 1:
Luodaan luettelo, joka sisältää 10 aihetta 'firstComponent.js'-tiedostossa. Käytä for:each template -ohjetta ja iteroi tämä luettelo 'ali'-iteraattorilla. Määritä avain täksi iteraattoriksi kappaletunnisteen sisällä ja näytä aiheet.
firstExample.html'sub' for:index= 'indeksi' >
{sub}
firstExample.js
// Luo subjektien_taulukko, joka pitää sisällään 10 aiheita
subjects_array = [ 'AWS' , 'Myyntivoima' , 'PHP' , 'Java' , 'Python' , 'HTML' , 'JS' , 'Java' , 'Oraakkeli' , 'C#' ];
Koko koodi:
Lähtö:
Lisää tämä komponentti minkä tahansa objektin 'Record'-sivulle (lisäämme sen tilin 'Record'-sivulle). Kaikki 10 elementtiä näytetään käyttöliittymässä.
Esimerkki 2:
Nyt luomme joukon objekteja, joka on 'id', ohjelma ja kirjoita 10 tietueella, jotka liittyvät aiheisiin. Nämä iteroidaan ohjelman ja tyypin saamiseksi. Avain on 'id' ja tyyppiarvot näytetään lihavoituna.
toinenEsimerkki.html'obj' for:index= 'indeksi' >
{obj.program} - {obj.type}
secondExample.js
// Luo array_of_objects, joka sisältää tiedot 10 aiheita
array_of_objects = [{id: 1 ,ohjelmoida: 'AWS' , tyyppi: 'Pilvi' },{id: 2 ,ohjelmoida: 'Myyntivoima' , tyyppi: 'Pilvi' },
{id: 3 ,ohjelmoida: 'PHP' , tyyppi: 'Web' },{id: 4 ,ohjelmoida: 'Java' , tyyppi: 'Web/Data' },
{id: 5 ,ohjelmoida: 'Python' , tyyppi: 'Kaikki' },{id: 6 ,ohjelmoida: 'HTML' , tyyppi: 'Web' },
{id: 7 ,ohjelmoida: 'JS' , tyyppi: 'Web' },{id: 8 ,ohjelmoida: '.NETTO' , tyyppi: 'Web/Data' },
{id: 9 ,ohjelmoida: 'Oraakkeli' , tyyppi: 'Data' },{id: 10 ,ohjelmoida: 'C#' , tyyppi: 'Data' }];
Koko koodi:
Lähtö:
Voit nähdä, että kaikki ohjelmat näkyvät käyttöliittymässä niiden tyypeineen.
Esimerkki 3:
Luo sisäkkäinen objektijoukko (tunnus, ohjelma, tyyppi ja aiheet). Täällä aiheissa on jälleen luettelo elementeistä. Ensimmäisessä for:each template -direktiivissä iteroimme koko sisäkkäisen taulukon. Tämän mallin sisällä iteroimme aiheita uudelleen käyttämällä edellistä iteraattoria. Seuraavaksi näytämme ohjelman, tyypin ja aiheet pääsivulla for:each mallille.
thirdComponent.html'val' for:index= 'indeksi' >
'val1' >
OHJELMA: {val.program} - {val.type} AIHEEET: {val.Topics}
thirdComponent.js
data = [{id: 1 ,ohjelmoida: 'AWS' , tyyppi: 'Pilvi' , Aiheet:[ 'Esittely' , 'AWC olennaiset asiat' ]},
{id: 2 ,ohjelmoida: 'Myyntivoima' , tyyppi: 'Pilvi' , Aiheet:[ 'Järjestelmänvalvoja' , 'Kehitys' ]},
{id: 3 ,ohjelmoida: 'PHP' , tyyppi: 'Web' , Aiheet:[ 'Esittely' , 'PHP-MySQL' ]}];
Koko koodi:
Lähtö:
Kaikki aiheet näytetään tyypeineen ja aiheineen. Jokainen aihe sisältää kaksi aihetta.
Esimerkki 4:
Toistetaan tietueita, jotka ovat 'Account'-objektissa. Kirjoita ensin Apex-luokka, joka palauttaa luettelon tietueista (returnAcc() – menetelmä), jotka sisältävät Tilitunnus-, Nimi-, Toimiala- ja Rating-kentät Account Standard -objektista. 'js'-tiedostossa kutsumme Apexin returnAcc()-metodin (import-käskyn kautta) connectcallback()-funktion sisällä. Tämä palauttaa tilit. Lopuksi nämä tilit on määritetty for:each-malliohjeessa, jotta saadaan tilin nimi ja toimiala.
AccountData.apxcjulkinen jakamalla luokan AccountData {
@AuraEnabled(välimuistissa = tosi)
julkinen static List
List
palauttaa tililuettelo;
}
}
finalComponent.html
'account_rec' >
Tili: {account_rec.Name} Toimiala: {account_rec.Industry}
finalComponent.js
tuo { LightningElement,track } kohteesta 'onnea' ;
tuo returnAcc alkaen '@salesforce/apex/AccountData.returnAcc' ;
vienti oletusluokka FinalComponent laajentaa LightningElement {
@track tilit;
@track error;
ConnectedCallback(){
returnAcc()
// Palauta tilit
.then(tulos => {
this.accounts = tulos;
this.error = määrittelemätön;
})
.catch(error => {
this.error = virhe;
this.accounts = määrittelemätön;
});
}
}
Lähtö:
Vain 10 tiliä näytetään Nimi- ja Toimiala-kentillä.
Johtopäätös
Keskustelimme for:each template -direktiivistä, jota käytetään palauttamaan kohteet annetuista tiedoista. Tarjolla on neljä erilaista esimerkkiä, jotka sisältävät luettelon, objektijoukon, sisäkkäiset objektit ja Salesforce-objektit. Tietojen on tultava 'js'-tiedostosta ja käytettävä sitä for:each-mallissa. Varmista, että sinun on otettava ensin käyttöön Apex-luokka, kun otat viimeisiä esimerkkikomponentteja käyttöön.