Per cadascú
A LWC, for:each és una directiva que s'utilitza amb l'etiqueta de plantilla. Retorna els elements de les dades proporcionades. Pren dos paràmetres. Hem d'especificar les dades al for:each={dades} i for:item='variable' pren l'element actual (de l'iterador) que s'especifica amb una variable. El for:index='index_var' emmagatzema l'índex d'element que especifica l'índex d'element actual.
Sintaxi:
Vegem com especificar la directiva for:each al LWC (component HTML). El for:index és opcional.
'item_var' per:index= 'index_var' >
'1.0' ?>
2. En tots els exemples que parlarem en aquesta guia, la lògica es proporcionarà com a codi “js”. Després d'això, especifiquem la captura de pantalla que inclou tot el codi 'js'.
Exemple 1:
Creem una llista que contingui 10 temes al fitxer 'firstComponent.js'. Utilitzeu la directiva de plantilla for:each i itereu aquesta llista amb l'iterador 'sub'. Especifiqueu la clau com a iterador dins de l'etiqueta de paràgraf i visualitzeu els temes.
firstExample.html'sub' per:index= 'índex' >
{sub}
firstExample.js
// Crea subjectes_array que contingui 10 subjectes
matriu_assumptes = [ 'AWS' , 'Força de vendes' , 'PHP' , 'Java' , 'Python' , 'HTML' , 'JS' , 'Java' , 'Oracle' , 'C#' ];
Codi sencer:
Sortida:
Afegiu aquest component a la pàgina 'Registra' de qualsevol objecte (l'afegim a la pàgina 'Registra' del compte). Els 10 elements es mostren a la interfície d'usuari.
Exemple 2:
Ara, creem una matriu d'objectes que és 'id', el programa, i escrivim amb 10 registres relacionats amb els subjectes. Aquests s'iteren per obtenir el programa i escriure. La clau és la 'id' i els valors de tipus es mostren en negreta.
segonExemple.html'obj' per:index= 'índex' >
{obj.program} - {obj.type}
secondExample.js
// Crea una matriu_d'objectes que conté detalls 10 subjectes
matriu_d'objectes = [{id: 1 ,programa: 'AWS' , escriviu: 'núvol' },{id: 2 ,programa: 'Força de vendes' , escriviu: 'núvol' },
{id: 3 ,programa: 'PHP' , escriviu: 'Web' },{id: 4 ,programa: 'Java' , escriviu: 'Web/Dades' },
{id: 5 ,programa: 'Python' , escriviu: 'Tots' },{id: 6 ,programa: 'HTML' , escriviu: 'Web' },
{id: 7 ,programa: 'JS' , escriviu: 'Web' },{id: 8 ,programa: '.NET' , escriviu: 'Web/Dades' },
{id: 9 ,programa: 'Oracle' , escriviu: 'Dades' },{id: 10 ,programa: 'C#' , escriviu: 'Dades' }];
Codi sencer:
Sortida:
Podeu veure que tots els programes es mostren a la interfície d'usuari juntament amb els seus tipus.
Exemple 3:
Creeu una matriu imbricada d'objectes (id, programa, tipus i temes). Aquí, els temes tornaran a tenir una llista d'elements. A la primera directiva de plantilla for:each, iterem tota la matriu imbricada. Dins d'aquesta plantilla, tornem a iterar els temes utilitzant l'iterador anterior. A continuació, mostrem el programa, el tipus i els temes al principal per a cada plantilla.
tercercomponent.html'val' per:index= 'índex' >
'val1' >
PROGRAMA: {val.program} - {val.type} TEMES: {val.Temes}
tercercomponent.js
dades = [{id: 1 ,programa: 'AWS' , escriviu: 'núvol' , Temes:[ 'Introducció' , 'Bessencial de l'AWC' ]},
{id: 2 ,programa: 'Força de vendes' , escriviu: 'núvol' , Temes:[ 'Administrador' , 'Desenvolupament' ]},
{id: 3 ,programa: 'PHP' , escriviu: 'Web' , Temes:[ 'Introducció' , 'PHP-MySQL' ]}];
Codi sencer:
Sortida:
Es mostren totes les assignatures amb el seu tipus i temes. Cada tema té dos temes.
Exemple 4:
Iterem els registres que hi ha a l'objecte 'Compte'. En primer lloc, escriviu una classe Apex que retorni la llista de registres (returnAcc() - mètode) que inclouen els camps d'identificació del compte, nom, indústria i puntuació de l'objecte estàndard de compte. Al fitxer 'js', invoquem el mètode returnAcc() des d'Apex (mitjançant la instrucció d'import) dins del connectedcallback(). Això retorna els comptes. Finalment, aquests comptes s'especifiquen a la directiva de plantilla for:each per obtenir el nom del compte i la indústria.
AccountData.apxcpúblic amb classe per compartir AccountData {
@AuraEnabled (cacheable=true)
Public static List
List
retornar la llista de comptes;
}
}
finalcomponent.html
'account_rec' >
Compte: {account_rec.Name} Indústria: {account_rec.Industry}
finalComponent.js
importar { LightningElement,track } de 'sort' ;
importar returnAcc de '@salesforce/apex/AccountData.returnAcc' ;
exporta la classe per defecte FinalComponent amplia LightningElement {
@track comptes;
@track error;
connectatCallback(){
returnAcc()
// Torna els comptes
.then(resultat => {
això.comptes = resultat;
this.error = indefinit;
})
.catch(error => {
this.error = error;
això.comptes = sense definir;
});
}
}
Sortida:
Només es mostren 10 comptes amb els camps Nom i Indústria.
Conclusió
Hem parlat de la directiva de plantilla for:each que s'utilitza per retornar els elements de les dades proporcionades. Es proporcionen quatre exemples diferents que inclouen la llista, la matriu d'objectes, els objectes imbricats i els objectes de Salesforce. Les dades han de provenir del fitxer 'js' i utilitzar-les a la plantilla for:each. Assegureu-vos que primer heu de desplegar la classe Apex mentre desplegueu els últims components d'exemple.