Igaühele
LWC-s on for:each direktiiv, mida kasutatakse koos mallisildiga. See tagastab üksused antud andmetest. Selleks on vaja kahte parameetrit. Peame täpsustama andmed for:each={data} ja for:item=”muutuja” võtab muutujaga määratud praeguse üksuse (iteraatorist). The for:index=”index_var” salvestab elemendiindeksi, mis määrab praeguse elemendi indeksi.
Süntaks:
Vaatame, kuidas määrata for:each direktiivi LWC-s (HTML-komponent). For:indeks on valikuline.
'1.0' ?>
2. Kõikides näidetes, mida me selles juhendis käsitleme, on loogika esitatud js-koodina. Pärast seda määrame ekraanipildi, mis sisaldab kogu 'js' koodi.
Näide 1:
Loome loendi, mis sisaldab failis „firstComponent.js” 10 teemat. Kasutage käsku for:each template ja korrake seda loendit alamiteraatoriga. Määrake võti selle iteraatorina lõigusildi sees ja kuvage teemad.
firstExample.html{sub}
firstExample.js
// Looge subjektide_massiiv, mis hoiab 10 teemasid
subjektid_massiiv = [ 'AWS' , 'Salesforce' , 'PHP' , 'Java' , 'Python' , 'HTML' , 'JS' , 'Java' , 'Oraakel' , 'C#' ];
Kogu kood:
Väljund:
Lisage see komponent mis tahes objekti lehele 'Rekord' (lisame selle konto lehele 'Kirje'). Kõik 10 elementi kuvatakse kasutajaliideses.
Näide 2:
Nüüd loome objektide massiivi, mis on 'id', programm ja tippige 10 teemadega seotud kirjega. Neid korratakse programmi ja tüübi hankimiseks. Võti on 'id' ja tüübi väärtused kuvatakse paksus kirjas.
secondExample.html{obj.programm} – {obj.type}
secondExample.js
// Looge massiiv_of_objects, mis sisaldab üksikasju 10 teemasid
array_of_objects = [{id: 1 ,programm: 'AWS' , tüüp: 'pilv' },{id: 2 ,programm: 'Salesforce' , tüüp: 'pilv' },
{id: 3 ,programm: 'PHP' , tüüp: 'Võrk' },{id: 4 ,programm: 'Java' , tüüp: 'Veeb/andmed' },
{id: 5 ,programm: 'Python' , tüüp: 'Kõik' },{id: 6 ,programm: 'HTML' , tüüp: 'Võrk' },
{id: 7 ,programm: 'JS' , tüüp: 'Võrk' },{id: 8 ,programm: '.NET' , tüüp: 'Veeb/andmed' },
{id: 9 ,programm: 'Oraakel' , tüüp: 'Andmed' },{id: 10 ,programm: 'C#' , tüüp: 'Andmed' }];
Kogu kood:
Väljund:
Näete, et kasutajaliideses kuvatakse kõik programmid koos nende tüüpidega.
Näide 3:
Looge objektidest pesastatud massiiv (id, programm, tüüp ja teemad). Siin sisaldavad teemad taas elementide loendit. Esimeses for:each template direktiivis kordame kogu pesastatud massiivi. Selles mallis kordame teemasid uuesti, kasutades eelmist iteraatorit. Järgmisena kuvame iga malli jaoks programmi, tüübi ja teemad.
thirdComponent.html'val1' >
PROGRAMM: {val.program} - {val.type} TEEMAD: {val.Topics}
thirdComponent.js
andmed = [{id: 1 ,programm: 'AWS' , tüüp: 'pilv' , Teemad:[ 'Sissejuhatus' , 'AWC olulised asjad' ]},
{id: 2 ,programm: 'Salesforce' , tüüp: 'pilv' , Teemad:[ 'Administraator' , 'Areng' ]},
{id: 3 ,programm: 'PHP' , tüüp: 'Võrk' , Teemad:[ 'Sissejuhatus' , 'PHP-MySQL' ]}];
Kogu kood:
Väljund:
Kuvatakse kõik teemad koos nende tüübi ja teemadega. Iga aine sisaldab kahte teemat.
Näide 4:
Kordame kirjeid, mis asuvad objektis „Konto”. Esmalt kirjutage Apex-klass, mis tagastab kirjete loendi (returnAcc() – meetod), mis sisaldavad Konto ID, Nimi, Tööstusharu ja Reitingu välju objektist Konto standard. Failis „js” kutsume välja Apexi meetodi returnAcc() (impordilause kaudu) ühendatud callback() sees. See tagastab kontod. Lõpuks on need kontod määratud malli käskkirjas for:each, et saada konto nimi ja tegevusala.
AccountData.apxcavalik jagamisklassiga AccountData {
@AuraEnabled(vahemällu salvestatav=true)
public static List
Loend
tagasta kontoloend;
}
}
finalComponent.html
'account_rec' >
Konto: {account_rec.Name} Tööstusala: {account_rec.Industry}
finalComponent.js
import { LightningElement,track } from 'õnn' ;
import returnAcc from „@salesforce/apex/AccountData.returnAcc” ;
ekspordi vaikeklass FinalComponent laiendab LightningElement {
@track kontod;
@track error;
ühendatud Callback(){
returnAcc()
// Tagasta kontod
.then(tulemus => {
this.accounts = tulemus;
this.error = määramata;
})
.catch(error => {
this.error = viga;
this.accounts = määramata;
});
}
}
Väljund:
Väljadega Nimi ja Tööstus kuvatakse ainult 10 kontot.
Järeldus
Arutasime for:each malli käskkirja, mida kasutatakse antud andmetest üksuste tagastamiseks. Esitatakse neli erinevat näidet, mis hõlmavad loendit, objektide massiivi, pesastatud objekte ja Salesforce'i objekte. Andmed peavad pärinema failist „js” ja kasutama seda mallis for:each. Veenduge, et peate esmalt juurutama Apexi klassi, samal ajal juurutades viimaseid näidiskomponente.