LWC For: hvert direktiv

Lwc For Hvert Direktiv



Hvis du jobber med LWC-lister eller Salesforce-poster, kan det hende du har et krav om å returnere dataene. Du må for eksempel vise alle postene fra Salesforce-objektet (Standard eller Custom), vi må lagre alle i Apex-listen og vise postene. Her kommer for-hver-mal-direktivet inn i bildet. I utgangspunktet er foreach en løkke som er spesifisert i HTML-malen som returnerer alle postene som er tilstede i de gitte dataene. I denne veiledningen vil vi diskutere hvordan du henter elementene fra arrayen, arrayen av objekter, nestede objekter og Apex-listen med eksempler.

For hver

I LWC er for:each et direktiv som brukes med malkoden. Den returnerer varene fra de gitte dataene. Det krever to parametere. Vi må spesifisere dataene i for:each={data} og for:item='variabel' tar det gjeldende elementet (fra iterator) som er spesifisert med en variabel. De for:index='index_var' lagrer elementindeksen som spesifiserer gjeldende elementindeks.

Syntaks:





La oss se hvordan du spesifiserer for:each-direktivet i LWC (HTML Component). For:indeksen er valgfri.



'item_var' for:indeks= 'indeks_var' >


'1.0' ?>

'http://soap.sforce.com/2006/04/metadata' >

57,0

true



lightning__RecordPage

lightning__AppPage

lyn__hjemmeside



2. I alle eksemplene som vi skal diskutere i denne veiledningen, vil logikk bli gitt som 'js'-koden. Etter det spesifiserer vi skjermbildet som inkluderer hele 'js'-koden.



Eksempel 1:

La oss lage en liste som inneholder 10 emner i filen 'firstComponent.js'. Bruk for:each mal-direktivet og gjenta denne listen med 'sub' iteratoren. Spesifiser nøkkelen som denne iteratoren inne i avsnittskoden og vis emnene.

firstExample.html



'Subjects Array' >



'under' for:indeks= 'indeks' >

{sub}







firstExample.js

// Lag subjects_array som holder 10 fag

subjects_array = [ 'AWS' , 'Salesforce' , 'PHP' , 'Java' , 'Python' , 'HTML' , 'JS' , 'Java' , 'Oracle' , 'C#' ];

Hele koden:

Produksjon:

Legg til denne komponenten på «Record»-siden til ethvert objekt (vi legger den til på «Record»-siden for kontoen). Alle 10 elementene vises på brukergrensesnittet.

Eksempel 2:

Nå lager vi en rekke objekter som er 'id', programmet, og skriver med 10 poster relatert til emner. Disse gjentas for å få program og type. Nøkkelen er 'id' og typeverdiene vises i fet skrift.

secondExample.html



'Rekke av emner' >



'obj' for:indeks= 'indeks' >

{obj.program} - {obj.type}











secondExample.js

// Lag array_of_objects som inneholder detaljer om 10 fag

array_of_objects = [{id: 1 ,program: 'AWS' , skriv: 'Sky' },{id: 2 ,program: 'Salesforce' , skriv: 'Sky' },

{id: 3 ,program: 'PHP' , skriv: 'Web' },{id: 4 ,program: 'Java' , skriv: 'Nett/data' },

{id: 5 ,program: 'Python' , skriv: 'Alle' },{id: 6 ,program: 'HTML' , skriv: 'Web' },

{id: 7 ,program: 'JS' , skriv: 'Web' },{id: 8 ,program: '.NETT' , skriv: 'Nett/data' },

{id: 9 ,program: 'Oracle' , skriv: 'Data' },{id: 10 ,program: 'C#' , skriv: 'Data' }];

Hele koden:

Produksjon:

Du kan se at alle programmene vises på brukergrensesnittet sammen med typene deres.

Eksempel 3:

Lag en nestet rekke objekter (id, program, type og emner). Her vil emnene igjen inneholde en liste over elementer. I det første for:each template-direktivet itererer vi hele den nestede matrisen. Inne i denne malen itererer vi emnene igjen ved å bruke den forrige iteratoren. Deretter viser vi programmet, typen og emnene i hovedsak for:hver mal.

thirdComponent.html



'Rekke av emner' >



'val' for:indeks= 'indeks' >

'val1' >



PROGRAM:  {val.program}   - {val.type} EMNER:   {val.Emner}







thirdComponent.js

data = [{id: 1 ,program: 'AWS' , skriv: 'Sky' , Emner:[ 'Introduksjon' , 'AWC nødvendigheter' ]},

{id: 2 ,program: 'Salesforce' , skriv: 'Sky' , Emner:[ 'Admin' , 'Utvikling' ]},

{id: 3 ,program: 'PHP' , skriv: 'Web' , Emner:[ 'Introduksjon' , 'PHP-MySQL' ]}];

Hele koden:

Produksjon:

Alle fagene vises med sin type og emner. Hvert emne har to emner.

Eksempel 4:

La oss iterere postene som er til stede i 'Konto'-objektet. Skriv først en Apex-klasse som returnerer listen over poster (returnAcc() – metode) som inkluderer konto-ID, navn, industri og vurdering-feltene fra kontostandardobjektet. I 'js'-filen påkaller vi returnAcc()-metoden fra Apex (gjennom importsetningen) inne i connectedcallback(). Dette returnerer regnskapet. Til slutt er disse kontoene spesifisert i for:each mal-direktivet for å få kontonavn og bransje.

AccountData.apxc

offentlig med deling av klassen AccountData {

@AuraEnabled(cacheable=true)

offentlig statisk liste returnAcc(){

List accountList = [VELG ID, Navn, Bransje, Vurdering FRA Kontogrense 10 ];

returnere kontoliste;

}

}

finalComponent.html



'Vis liste over kontoer' >

'slds-var-m-around_medium' >