Foreach
In LWC is for:each een richtlijn die wordt gebruikt met de sjabloontag. Het retourneert de items uit de gegeven gegevens. Er zijn twee parameters nodig. We moeten de gegevens specificeren in de voor:elke={gegevens} En for:item=”variabele” neemt het huidige item (uit de iterator) dat is opgegeven met een variabele. De for:index=”index_var” slaat de elementindex op die de huidige elementindex specificeert.
Syntaxis:
Laten we eens kijken hoe we de for:each richtlijn in de LWC (HTML Component) kunnen specificeren. De for:index is optioneel.
'1,0' ?>
2. In alle voorbeelden die we in deze handleiding gaan bespreken, wordt logica weergegeven als de “js”-code. Daarna specificeren we de schermafbeelding die de volledige “js” -code bevat.
Voorbeeld 1:
Laten we een lijst maken met 10 onderwerpen in het bestand “firstComponent.js”. Gebruik de for:each-sjablooninstructie en herhaal deze lijst met de “sub”-iterator. Geef de sleutel op als deze iterator in de alineatag en geef de onderwerpen weer.
eersteVoorbeeld.html{sub}
eersteVoorbeeld.js
// Maak subject_array die daarin past 10 onderwerpen
onderwerpen_array = [ 'AWS' , 'Verkoopsteam' , 'PHP' , 'Java' , 'Python' , 'HTML' , 'JS' , 'Java' , 'Orakel' , 'C#' ];
Volledige code:
Uitgang:
Voeg deze component toe aan de “Record”-pagina van een willekeurig object (we voegen deze toe aan de account “Record”-pagina). Alle 10 elementen worden weergegeven in de gebruikersinterface.
Voorbeeld 2:
Nu maken we een array van objecten, namelijk “id”, het programma, en type met 10 records gerelateerd aan Onderwerpen. Deze worden herhaald om het programma en het type te verkrijgen. De sleutel is de “id” en de typewaarden worden vetgedrukt weergegeven.
tweedeVoorbeeld.html{obj.programma} - {obj.type}
tweedeVoorbeeld.js
// Maak array_of_objects die details bevat van 10 onderwerpen
array_of_objects = [{id: 1 ,programma: 'AWS' , typ: 'Wolk' },{ID kaart: 2 ,programma: 'Verkoopsteam' , typ: 'Wolk' },
{ID kaart: 3 ,programma: 'PHP' , typ: 'Web' },{ID kaart: 4 ,programma: 'Java' , typ: 'Web/gegevens' },
{ID kaart: 5 ,programma: 'Python' , typ: 'Alle' },{ID kaart: 6 ,programma: 'HTML' , typ: 'Web' },
{ID kaart: 7 ,programma: 'JS' , typ: 'Web' },{ID kaart: 8 ,programma: '.NETTO' , typ: 'Web/gegevens' },
{ID kaart: 9 ,programma: 'Orakel' , typ: 'Gegevens' },{ID kaart: 10 ,programma: 'C#' , typ: 'Gegevens' }];
Volledige code:
Uitgang:
U kunt zien dat alle programma's samen met hun typen in de gebruikersinterface worden weergegeven.
Voorbeeld 3:
Maak een geneste reeks objecten (id, programma, type en onderwerpen). Hier bevatten de onderwerpen opnieuw een lijst met elementen. In de eerste for:elke sjabloonrichtlijn herhalen we de gehele geneste array. Binnen deze sjabloon herhalen we de onderwerpen opnieuw met behulp van de vorige iterator. Vervolgens geven we het programma, het type en de onderwerpen weer in het hoofdmenu voor: elke sjabloon.
derdeComponent.htmlPROGRAMMA: {val.program} - {val.type} ONDERWERPEN: {val.Topics}
derdeComponent.js
gegevens = [{id: 1 ,programma: 'AWS' , typ: 'Wolk' , Onderwerpen:[ 'Invoering' , 'Essentiële AWC-benodigdheden' ]},
{ID kaart: 2 ,programma: 'Verkoopsteam' , typ: 'Wolk' , Onderwerpen:[ 'Beheerder' , 'Ontwikkeling' ]},
{ID kaart: 3 ,programma: 'PHP' , typ: 'Web' , Onderwerpen:[ 'Invoering' , 'PHP-MySQL' ]}];
Volledige code:
Uitgang:
Alle onderwerpen worden weergegeven met het type en de onderwerpen. Elk onderwerp bevat twee onderwerpen.
Voorbeeld 4:
Laten we de records herhalen die aanwezig zijn in het object 'Account'. Schrijf eerst een Apex-klasse die de lijst met records retourneert (returnAcc() – methode) die de velden Account-ID, Naam, Industrie en Beoordeling uit het Account Standard-object bevatten. In het bestand “js” roepen we de methode returnAcc() van Apex aan (via de importinstructie) binnen de connectedcallback(). Hiermee worden de rekeningen geretourneerd. Ten slotte worden deze accounts gespecificeerd in de for:each-sjabloonrichtlijn om de accountnaam en branche op te halen.
AccountData.apxcopenbaar met deelklasse AccountData {
@AuraEnabled(cachebaar=waar)
openbare statische Lijst
Lijst
retour accountLijst;
}
}
finalComponent.html
Account: {account_rec.Name} Industrie: {account_rec.Industry
finalComponent.js
importeer { LightningElement,track } van 'geluk' ;
importeer returnAcc van '@salesforce/apex/AccountData.returnAcc' ;
standaardklasse exporteren FinalComponent breidt LightningElement uit {
@track-accounts;
@trackfout;
verbondenCallback(){
returnAcc()
// Retourneer de rekeningen
.dan(resultaat => {
dit.accounts = resultaat;
deze.fout = ongedefinieerd;
})
.catch(fout => {
deze.fout = fout;
dit.accounts = ongedefinieerd;
});
}
}
Uitgang:
Er worden slechts 10 accounts weergegeven met de velden Naam en Branche.
Conclusie
We hebben de for:each-sjabloonrichtlijn besproken die wordt gebruikt om de items uit de gegeven gegevens te retourneren. Er worden vier verschillende voorbeelden gegeven, waaronder de lijst, de array met objecten, geneste objecten en Salesforce-objecten. De gegevens moeten afkomstig zijn uit het “js”-bestand en dat gebruiken in de for:each-sjabloon. Zorg ervoor dat u eerst de Apex-klasse moet implementeren terwijl u de laatste voorbeeldcomponenten implementeert.